/* ── Blue Palette ───────────────────────────────
   Full scale · active steps annotated
────────────────────────────────────────────── */
:root {
  --blue-0:   #FBFDFF;
  --blue-10:  #F1F7FF;   /* → color-bg           */
  --blue-20:  #E1EDFE;   /* → btn hover fill      */
  --blue-30:  #CEE1FE;   /* → color-text-muted, color-border, btn active fill */
  --blue-40:  #B6D3FE;
  --blue-50:  #9DC3FD;
  --blue-60:  #7FB1FC;   /* → color-text-secondary */
  --blue-70:  #5D9DFC;
  --blue-80:  #3A87FB;   /* → color-accent, color-text ★ base */
  --blue-90:  #3173D5;   /* → btn-primary hover   */
  --blue-100: #2A61B5;   /* → btn-primary active  */
  --blue-110: #235197;
  --blue-120: #1C4178;
  --blue-130: #16335F;
  --blue-140: #102646;
  --blue-150: #0A182D;
  --blue-160: #060E19;
}

/* ── Grey Palette ───────────────────────────────
   Full scale · active steps annotated
────────────────────────────────────────────── */
:root {
  --grey-0:   #FFFFFF;   /* → toggle bg · mono color-surface  */
  --grey-10:  #F5F5F5;   /* → mono color-bg                   */
  --grey-20:  #EBEBEB;
  --grey-30:  #E0E0E0;
  --grey-40:  #D4D4D4;
  --grey-50:  #C8C8C8;   /* → toggle border · mono color-border */
  --grey-60:  #B8B8B8;
  --grey-70:  #A0A0A0;
  --grey-80:  #767676;   /* → mono color-text-muted  4.54:1 AAA */
  --grey-90:  #666666;
  --grey-100: #555555;
  --grey-110: #444444;   /* → mono color-text-secondary         */
  --grey-120: #333333;
  --grey-130: #2A2A2A;
  --grey-140: #222222;
  --grey-150: #181818;
  --grey-160: #111111;   /* → toggle text/bg · mono color-accent/text */
}

/* ── Semantic Tokens — Color ────────────────── */
:root {
  --color-bg:             var(--blue-10);
  --color-surface:        #FFFFFF;
  --color-subtle:         var(--blue-20);   /* table headers, hover fills — one step above bg */
  --color-accent:         var(--blue-80);
  --color-accent-hover:   var(--blue-90);
  --color-accent-active:  var(--blue-100);
  --color-text:           var(--blue-80);
  --color-text-secondary: var(--blue-60);
  --color-text-muted:     var(--blue-30);
  --color-text-on-bg:     var(--blue-100);  /* readable on --color-bg · 5.3:1 AA */
  --color-border:         var(--blue-30);
}

/* ── Semantic Tokens — Typography ──────────── */
:root {
  --font-heading: 'PT Serif', serif;
  --font-body:    'Montserrat', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --text-xxs:  12px;   /* meta, labels, tags, buttons    */
  --text-xs:   16px;   /* greeting                       */
  --text-sm:   18px;   /* body text, items, books ★ base */
  --text-base: 24px;   /* overview, block titles         */
  --text-lg:   36px;   /* section titles, row labels     */
  --text-xl:   64px;   /* page title, case study title ceiling */
  --text-2xl:  48px;   /* case study title floor (clamp) */

  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.1;   /* large display headings  */
  --leading-normal: 1.2;   /* titles, subtitles       */
  --leading-loose:  1.5;   /* body text, descriptions */
}

/* ── Semantic Tokens — Spacing ─────────────── */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  --gutter: 120px;   /* section side padding · 24px on mobile */
}

@media (max-width: 640px) {
  :root { --gutter: 24px; }
}

/* ── Semantic Tokens — Chart Fills ─────────── */
:root {
  --color-chart-1: var(--blue-40);
  --color-chart-2: var(--blue-60);
  --color-chart-3: var(--blue-80);
  --color-chart-4: var(--blue-100);
}

/* ── Semantic Tokens — State Colors ────────── */
:root {
  --color-success:        #10B981;
  --color-success-bg:     #ECFDF5;
  --color-success-border: #A7F3D0;

  --color-warning:        #F59E0B;
  --color-warning-bg:     #FFFBEB;
  --color-warning-border: #FDE68A;

  --color-danger:         #EF4444;
  --color-danger-bg:      #FEF2F2;
  --color-danger-border:  #FECACA;
}

/* ── Mono Theme (AAA-safe) ──────────────────── */
[data-theme="mono"] {
  --color-accent:          var(--grey-160);
  --color-accent-hover:    var(--grey-140);
  --color-accent-active:   var(--grey-120);
  --color-text:            var(--grey-160);
  --color-text-secondary:  var(--grey-110);
  --color-text-muted:      var(--grey-80);  /* 4.54:1 — AAA for large/decorative text */
  --color-text-on-bg:      var(--grey-130);
  --color-border:          var(--grey-50);
  --color-bg:              var(--grey-10);
  --color-surface:         var(--grey-0);
  --color-subtle:          var(--grey-20);
  --color-chart-1:         var(--grey-40);
  --color-chart-2:         var(--grey-60);
  --color-chart-3:         var(--grey-90);
  --color-chart-4:         var(--grey-130);
}