/* ============================================================
   DARTEVELLE ENGINEERING — Design Tokens
   Foundations: color + typography + spacing/radius/shadow
   Bilingual FR/EN · Premium, understated, engineering-grade
   ============================================================ */

/* --- Webfonts (Google Fonts) -------------------------------
   Display : Sora       (geometric, modern, distinctive)
   Body/UI : Manrope    (clean geometric, high legibility)
   Mono    : Space Mono (technical eyebrows, indices, data)
   NOTE: loaded from Google Fonts CDN. If you need offline/
   self-hosted use, drop the .woff2 files into /fonts and
   swap these @imports for @font-face rules.
----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---------------------------------------------------------
     1. COLOR — RAW SCALES
     Monochrome system: warm, slightly yellow-biased neutrals
     ("stone/sand") do all the work. No chromatic brand accent —
     INK (stone-900) is the accent. Semantics exist for genuine
     system status only, never decoration.
  --------------------------------------------------------- */

  /* Warm neutral "Stone" scale */
  --stone-50:  #F7F5F0;   /* page background (light) */
  --stone-100: #EFEBE3;
  --stone-200: #E2DDD2;
  --stone-300: #CFC8B9;
  --stone-400: #AEA694;
  --stone-500: #877F6D;   /* muted / secondary text on light */
  --stone-600: #645C4D;
  --stone-700: #423D33;
  --stone-800: #2A2620;   /* dark surface */
  --stone-900: #1A1713;   /* ink / near-black (warm) */
  --stone-950: #110F0C;   /* deepest */

  /* (No chromatic accent. Ink is the accent — see roles below.) */

  /* Pure references */
  --white:     #FFFFFF;
  --black:     #000000;

  /* Semantic status (tuned to the warm palette) */
  --success-500: #4F7A52;
  --success-50:  #E7EFE6;
  --warning-500: #C98A1E;
  --warning-50:  #F6ECD6;
  --danger-500:  #B43A2A;
  --danger-50:   #F4Dfd9;
  --info-500:    #3F6B7D;
  --info-50:     #E1EBEF;

  /* ---------------------------------------------------------
     2. COLOR — SEMANTIC ROLES (light surfaces)
  --------------------------------------------------------- */
  --bg:            var(--stone-50);     /* page */
  --bg-raised:     var(--white);        /* cards / panels */
  --bg-sunken:     var(--stone-100);    /* wells / insets */
  --bg-inverse:    var(--stone-900);    /* dark sections */

  --fg:            var(--stone-900);    /* primary text */
  --fg-muted:      var(--stone-600);    /* secondary text */
  --fg-subtle:     var(--stone-500);    /* tertiary / captions */
  --fg-on-accent:  var(--stone-50);     /* text on ink */
  --fg-on-inverse: var(--stone-100);    /* text on dark */

  /* Accent = INK. High contrast carries emphasis, not hue. */
  --accent:        var(--stone-900);
  --accent-hover:  var(--stone-700);
  --accent-tint:   var(--stone-100);
  --accent-line:   var(--stone-400);    /* hairline rules / logo separator */

  --border:        var(--stone-200);    /* default hairline */
  --border-strong: var(--stone-300);
  --border-ink:    var(--stone-900);    /* high-contrast outline */

  /* ---------------------------------------------------------
     3. TYPOGRAPHY — FAMILIES
  --------------------------------------------------------- */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Type scale (1.250 major-third-ish, tuned) */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;
  --text-6xl:  112px;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-tight:   1.04;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-label:  0.16em;   /* mono eyebrows, all-caps labels */

  /* ---------------------------------------------------------
     4. SPACING (4px base)
  --------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ---------------------------------------------------------
     5. RADII — small & architectural, never pill-soft
  --------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ---------------------------------------------------------
     6. ELEVATION — restrained, warm-tinted shadows
  --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(26, 23, 19, 0.06);
  --shadow-sm: 0 1px 3px rgba(26, 23, 19, 0.08), 0 1px 2px rgba(26, 23, 19, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 23, 19, 0.08), 0 2px 4px rgba(26, 23, 19, 0.05);
  --shadow-lg: 0 12px 32px rgba(26, 23, 19, 0.10), 0 4px 8px rgba(26, 23, 19, 0.05);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Layout */
  --container: 1240px;
  --container-narrow: 760px;
  --header-h: 76px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Reusable classes mapping tokens to roles.
   ============================================================ */

/* Display headings ----------------------------------------- */
.h-display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg);
}

/* Body ----------------------------------------------------- */
.lead {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-muted);
}
.body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.small {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

/* Mono eyebrow / technical label --------------------------- */
.label {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.label--accent { color: var(--accent); }

/* Inline code ---------------------------------------------- */
.code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  color: var(--fg);
}