/* ============================================================
   BERG TECHNOLOGIE — Foundations: Color & Type
   "Präzision in jeder Achse"
   Import this file, then use the CSS variables below.
   Fonts are loaded from Google Fonts CDN (see note at bottom).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Expanded:wght@600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --berg-red:        #D81217; /* core brand accent, sampled from the logo mark */
  --berg-red-press:  #B30E13; /* hover / pressed (darker) */
  --berg-red-bright: #EF2A2A; /* highlights, on dark surfaces */
  --berg-red-tint:   #FBEAEA; /* faint wash background on light */
  --berg-red-tint-d: #2A1213; /* faint red wash on dark surfaces */

  /* ---------- GRAPHITE (cool dark neutrals) ---------- */
  --graphite-950: #0E1216; /* deepest background (hero, footer) */
  --graphite-900: #14181C;
  --graphite-800: #1C2127;
  --graphite-700: #272E35;
  --graphite-600: #3A434C;

  /* ---------- STEEL (cool mid + light neutrals) ---------- */
  --steel-500: #687079; /* muted body text on light, icons */
  --steel-400: #8A929B; /* captions, disabled */
  --steel-300: #AEB6BD; /* borders on dark, dividers */
  --steel-200: #D7DCE0; /* hairline borders on light */
  --steel-150: #E4E8EB; /* dividers, subtle lines */
  --steel-100: #EEF1F3; /* subtle fill, hover wash */
  --steel-50:  #F6F8F9; /* page tint / off-white section */
  --white:     #FFFFFF;

  /* ---------- SEMANTIC TEXT / SURFACE (light theme default) ---------- */
  --fg-1: var(--graphite-950); /* primary text */
  --fg-2: #3A434C;             /* secondary text */
  --fg-3: var(--steel-500);    /* tertiary / muted */
  --fg-on-accent: #FFFFFF;
  --fg-inverted: #FFFFFF;

  --bg-1: var(--white);        /* primary surface */
  --bg-2: var(--steel-50);     /* secondary surface / page tint */
  --bg-3: var(--steel-100);    /* tertiary fill */
  --bg-inverted: var(--graphite-950);

  --border-1: var(--steel-200); /* default hairline */
  --border-2: var(--steel-150); /* lighter divider */
  --border-strong: var(--graphite-600);

  /* ---------- STATUS ---------- */
  --success: #1E8E5A; --success-bg: #E7F4ED;
  --warning: #B7791F; --warning-bg: #FBF1DC;
  --error:   #D81217; --error-bg:   #FBEAEA; /* shares brand red */
  --info:    #2C6E9B; --info-bg:    #E6F0F6;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --font-sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Type scale (premium, generous). px values; line-heights tuned. */
  --fs-display-xl: 5rem;     /* 80px — hero on desktop */
  --fs-display-l:  3.75rem;  /* 60px */
  --fs-h1:         2.75rem;  /* 44px */
  --fs-h2:         2.125rem; /* 34px */
  --fs-h3:         1.625rem; /* 26px */
  --fs-h4:         1.25rem;  /* 20px */
  --fs-body-lg:    1.1875rem;/* 19px */
  --fs-body:       1.0625rem;/* 17px */
  --fs-body-sm:    0.9375rem;/* 15px */
  --fs-caption:    0.8125rem;/* 13px */
  --fs-label:      0.75rem;  /* 12px — mono eyebrow */

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-base:  1.6;
  --lh-relaxed: 1.72;

  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-label: 0.14em; /* uppercase mono labels */

  /* ============================================================
     RADII · SHADOWS · MOTION · LAYOUT
     ============================================================ */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Cool-tinted, layered, restrained */
  --shadow-xs: 0 1px 2px rgba(14,18,22,.06);
  --shadow-sm: 0 2px 6px -1px rgba(14,18,22,.08), 0 1px 2px rgba(14,18,22,.05);
  --shadow-md: 0 8px 24px -6px rgba(14,18,22,.12), 0 2px 6px -2px rgba(14,18,22,.07);
  --shadow-lg: 0 24px 56px -16px rgba(14,18,22,.22), 0 6px 16px -8px rgba(14,18,22,.10);
  --shadow-red: 0 10px 30px -8px rgba(216,18,23,.40);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  --maxw: 1200px;       /* content container */
  --maxw-wide: 1320px;  /* wide container */
  --maxw-prose: 720px;  /* reading measure */
  --gutter: 24px;
  --header-h: 72px;

  /* spacing tokens (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;
}

/* ------------------------------------------------------------
   DARK THEME — apply [data-theme="dark"] on a container.
   Berg leans on dark "engineered" sections heavily.
   ------------------------------------------------------------ */
[data-theme="dark"] {
  --fg-1: #F4F6F7;
  --fg-2: #C2C9CF;
  --fg-3: #8A929B;
  --bg-1: var(--graphite-950);
  --bg-2: var(--graphite-900);
  --bg-3: var(--graphite-800);
  --border-1: rgba(255,255,255,.10);
  --border-2: rgba(255,255,255,.06);
  --border-strong: rgba(255,255,255,.22);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --shadow-md: 0 10px 30px -8px rgba(0,0,0,.55);
  --shadow-lg: 0 30px 60px -18px rgba(0,0,0,.7);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (optional helpers / reference)
   ============================================================ */
.berg-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--berg-red);
}
.berg-display-xl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.berg-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.berg-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.berg-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.berg-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--fg-1);
}
.berg-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.berg-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.berg-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--fg-3);
}
.berg-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
}

/* ============================================================
   FONT NOTE
   Archivo, Archivo Expanded, and JetBrains Mono are all served
   from Google Fonts (links above). They were NOT bundled into
   /fonts because the build sandbox cannot download cross-origin
   assets. For an offline/production build, self-host the .woff2
   files and replace the @import with @font-face. See README.
   ============================================================ */