/* ==========================================================================
   Bioelectrum design tokens
   The single source of truth for colour, type, space, line, motion.
   Nothing below this file may hardcode a value that exists here.

   Palette is the official identity kit: Ink / Stone / Paper / Charcoal.
   One colour per placement; the system is monochrome by design.
   ========================================================================== */

:root {
  /* --- Brand constants (identical in every theme) ---------------------- */
  --brand-ink:       #15130F;  /* wordmark, mark, rules on Paper */
  --brand-stone:     #CFCCC4;  /* secondary brand neutral */
  --brand-paper:     #FFFFFF;  /* the field; never cream */
  --brand-charcoal:  #33363A;  /* hero / board plate */

  /* --- Semantic colour: light theme ----------------------------------- */
  --field:        var(--brand-paper);  /* page background */
  --surface:      #FAFAF8;             /* raised panels on the field */
  --text:         var(--brand-ink);    /* 19.6:1 on field */
  --text-muted:   #5C5C5C;             /*  6.7:1 on field — AA body      */
  --text-faint:   #6B6B6B;             /*  5.3:1 on field — AA captions  */
  --rule:         #E4E2DC;             /* hairline: Stone at ~35%        */
  --rule-strong:  var(--brand-stone);
  --accent:       var(--brand-ink);    /* monochrome: emphasis == Ink    */
  --on-accent:    var(--brand-paper);

  /* Inverted plate (hero, footer stamp) — constant across themes */
  --plate:        #212428;
  --plate-text:   #FFFFFF;
  --plate-muted:  #D9DBDD;
  --plate-lede:   #ECEDED;
  --plate-rule:   rgba(255, 255, 255, 0.28);
  --plate-scrim:  linear-gradient(105deg, rgba(21,19,15,.88) 0%, rgba(21,19,15,.62) 46%, rgba(21,19,15,.34) 100%);

  /* Status */
  --status-live:  var(--text);
  --status-plan:  var(--text-muted);
  --error:        #8C2F1E;             /* 6.4:1 on field */
  --success:      #1F5D3F;             /* 6.5:1 on field */

  /* Diagrams: monoline, drawn in currentColor so they follow the theme */
  --dg-stroke:      1.25px;
  --dg-stroke-fine: 0.9px;

  /* --- Type ----------------------------------------------------------- */
  --font-display: "Zilla Slab", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --size-display: clamp(2.6rem, 6.4vw, 4.6rem);
  --size-h2:      clamp(1.9rem, 3.6vw, 2.7rem);
  --size-h3:      1.375rem;   /* 22 */
  --size-lead:    1.25rem;    /* 20 */
  --size-body:    1.125rem;   /* 18 */
  --size-small:   1rem;       /* 16 */
  --size-meta:    0.875rem;   /* 14 */
  --size-caption: 0.75rem;    /* 12 */
  --size-label:   0.6875rem;  /* 11 */

  --leading-tight: 1.06;
  --leading-snug:  1.14;
  --leading-body:  1.6;
  --leading-loose: 1.8;

  --tracking-tight: -0.015em;
  --tracking-wide:   0.04em;
  --tracking-label:  0.22em;

  --measure:      62ch;   /* body copy */
  --measure-tight: 28ch;  /* pull quotes */

  /* --- Space (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;

  --section-y:        var(--space-9);
  --section-y-mobile: 56px;
  --gutter:           var(--space-7);
  --shell:            1180px;
  --header-h:         72px;

  /* --- Line & shape --------------------------------------------------- */
  --hairline: 1px;
  --radius:   0;   /* the identity is square: no rounded corners anywhere */

  /* --- Motion --------------------------------------------------------- */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Layers --------------------------------------------------------- */
  --z-header: 50;
  --z-skip:   80;

  color-scheme: light;
}

/* ==========================================================================
   Dark theme — the Ink field inverted. Same identity, same one-colour rule.
   Defined for both the system preference and an explicit [data-theme] choice
   so the in-page toggle can win in either direction.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --field:       #15130F;
    --surface:     #1E1C18;
    --text:        #F4F2ED;   /* 17.0:1 on field */
    --text-muted:  #A8A49B;   /*  7.6:1 on field — AA body    */
    --text-faint:  #97938A;   /*  6.1:1 on field — AA caption */
    --rule:        #33302A;
    --rule-strong: #4A463D;
    --accent:      #F4F2ED;
    --on-accent:   #15130F;
    --status-live: var(--text);
    --status-plan: var(--text-muted);
    --error:       #F0A08E;   /*  7.1:1 on field */
    --success:     #7FC6A0;   /*  9.4:1 on field */
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --field:       #15130F;
  --surface:     #1E1C18;
  --text:        #F4F2ED;
  --text-muted:  #A8A49B;
  --text-faint:  #97938A;
  --rule:        #33302A;
  --rule-strong: #4A463D;
  --accent:      #F4F2ED;
  --on-accent:   #15130F;
  --status-live: var(--text);
  --status-plan: var(--text-muted);
  --error:       #F0A08E;
  --success:     #7FC6A0;
  color-scheme: dark;
}