/* =================================================================
   BDS421 — Design Tokens
   Swiss-minimal / Austrian-industrial / AI-consulting
   ================================================================= */

/* ---- Webfonts (self-hosted from shared/fonts/, latin subset, DSGVO-safe) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('./fonts/inter-300.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/roboto-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/roboto-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/roboto-mono-600.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/roboto-mono-700.woff2') format('woff2'); }

:root {
  /* ============ COLOR — mono spine =========================== */
  --paper:        #FAFAF8;   /* page background, warm off-white */
  --paper-soft:   #F2F1ED;   /* alternating section bg          */
  --paper-sunk:   #EDECE6;   /* input bg, subtle well           */
  --ink:          #0A0A0A;   /* primary text, dark surfaces     */
  --ink-soft:     #1A1A1A;   /* dark surface elevated           */

  /* ============ COLOR — neutral ramp ========================= */
  --fg-1:         #0A0A0A;   /* primary text                    */
  --fg-2:         #3A3A38;   /* secondary text                  */
  --fg-3:         #6E6E68;   /* tertiary / meta                 */
  --fg-4:         #9A9A92;   /* disabled / placeholder          */
  --fg-5:         #C4C4BD;   /* icon on dark bg                 */
  --line:         #E0DFD8;   /* default 1px border              */
  --line-strong:  #C4C4BD;   /* stronger rule / focus border    */
  --line-ink:     #0A0A0A;   /* active/selected border          */

  /* ============ COLOR — accent + semantic ====================
     Accent is slate-teal — Prussian / indigo territory.
     Editorial, cool, newspaper-of-record. Signal-only. */
  --accent:       #20476A;   /* slate-teal — brand signal      */
  --accent-ink:   #173654;   /* darker, for hover / text         */
  --accent-soft:  #D9E0EA;   /* pale blue tint for highlight bg  */

  /* Secondary accent — warm counter-note to the slate-teal.
     Viennese industrial brick / oxidised iron. Used sparingly
     for highlights, underlines, pull-quote marks, category tags. */
  --accent-2:      #9C3D26;
  --accent-2-ink:  #7A2E1C;
  --accent-2-soft: #F4E4DD;

  --success:      #0F7A3D;
  --success-soft: #E3F0E8;
  --warning:      #B85A00;
  --warning-soft: #FBEAD7;
  --danger:       #A6241C;   /* proper red-— oxblood, still editorial     */
  --danger-ink:   #7A1A14;
  --danger-soft:  #F4DCD9;
  --info:         #55616C;
  --info-soft:    #E6E9EC;

  /* ============ TYPE — families ============================== */
  --font-sans:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --font-brand:   'Roboto Mono', 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  /* ============ TYPE — scale ================================= */
  --fs-xs:        12px;      /* eyebrow, meta      */
  --fs-sm:        14px;      /* small body         */
  --fs-base:      16px;      /* body               */
  --fs-md:        18px;      /* lead body          */
  --fs-lg:        22px;      /* h4, large lead     */
  --fs-xl:        28px;      /* h3                 */
  --fs-2xl:       40px;      /* h2                 */
  --fs-3xl:       56px;      /* h1                 */
  --fs-4xl:       80px;      /* display hero       */
  --fs-5xl:       112px;     /* XL display / stamp */

  /* ============ TYPE — weight / leading / track ============== */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semi:      600;
  --fw-bold:      700;

  --lh-tight:     1.05;
  --lh-snug:      1.18;
  --lh-body:      1.55;
  --lh-relaxed:   1.7;

  --tr-display:  -0.02em;
  --tr-tight:    -0.01em;
  --tr-normal:    0;
  --tr-mono:      0.01em;
  --tr-eyebrow:   0.12em;    /* small-caps label spacing */

  /* ============ SPACING ====================================== */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;

  /* ============ RADII (very restrained) ====================== */
  --r-0:    0;
  --r-1:    2px;             /* default control/card radius    */
  --r-2:    4px;
  --r-pill: 999px;           /* status chips, language toggle  */

  /* ============ BORDERS ====================================== */
  --bw-1:   1px;
  --bw-2:   2px;             /* active/selected, section rule  */

  /* ============ SHADOWS (sparse; cards have none at rest) === */
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(10,10,10,0.04), 0 8px 24px -8px rgba(10,10,10,0.08);
  --shadow-pop:  0 4px 12px rgba(10,10,10,0.08), 0 24px 48px -16px rgba(10,10,10,0.16);

  /* ============ MOTION ======================================= */
  --ease:        cubic-bezier(0.2, 0, 0, 1);
  --dur-micro:   120ms;
  --dur-state:   200ms;
  --dur-page:    400ms;

  /* ============ LAYOUT ======================================= */
  --container:   1280px;
  --gutter:      24px;
  --measure:     64ch;
  --measure-lg:  72ch;
  --nav-h:       72px;
}

/* =================================================================
   BASE ELEMENTS
   ================================================================= */
html, body {
  background: var(--paper);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Semantic type roles ------------------------------------------- */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0;
}
p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: var(--measure);
  margin: 0;
}
.lead {
  font-size: var(--fs-md);
  color: var(--fg-1);
  line-height: 1.5;
}
.meta, small {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

/* Eyebrow / small-caps label ------------------------------------ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Mono / code --------------------------------------------------- */
code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.93em;
  letter-spacing: var(--tr-mono);
  color: var(--fg-1);
}

/* Links — animated underline grows from left on hover (matches nav effect) */
a, .link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 200ms var(--ease), color var(--dur-micro) var(--ease);
}
a:hover, .link:hover {
  color: var(--accent);
  background-size: 100% 2px;
}

/* Display / hero ------------------------------------------------ */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}
.display-xl {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

/* 421 stamp — brand signature ----------------------------------- */
.stamp-421 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-mono);
  color: var(--fg-3);
}
.stamp-421::before { content: "— "; }

/* Selection colour --------------------------------------------- */
::selection { background: var(--accent); color: #fff; }