/* Hallmark · genre: editorial · macrostructure: Workbench · theme: Terminal
 * tone: technical · anchor hue: 155 (phosphor green) · designed-as-app
 * pre-emit critique: P5 H4 E5 S5 R5 V4
 * ============================================================
 * AfriTerminal Design Token System — v2.0 — May 2026
 * Single source of truth for all colours, typography, spacing.
 * Import this before any other stylesheet.
 * ============================================================ */

:root {

  /* ── Colour tokens · OKLCH · anchor hue 155 ── */
  --color-paper:      oklch(13% 0.010 155);
  --color-paper-2:    oklch(16% 0.012 155);
  --color-paper-3:    oklch(19% 0.012 155);
  --color-paper-4:    oklch(23% 0.010 155);
  --color-rule:       oklch(28% 0.008 155);
  --color-rule-subtle:oklch(22% 0.006 155);
  --color-ink:        oklch(93% 0.006 155);
  --color-ink-2:      oklch(65% 0.008 155);
  --color-muted:      oklch(45% 0.006 155);
  --color-disabled:   oklch(35% 0.004 155);
  --color-accent:     oklch(80% 0.22 155);
  --color-accent-dim: oklch(80% 0.22 155 / 0.12);
  --color-focus:      oklch(75% 0.20 155);
  --color-red:        oklch(65% 0.22 25);
  --color-red-dim:    oklch(65% 0.22 25 / 0.12);
  --color-amber:      oklch(78% 0.16 85);
  --color-amber-dim:  oklch(78% 0.16 85 / 0.12);
  --color-blue:       oklch(70% 0.15 240);
  --color-blue-dim:   oklch(70% 0.15 240 / 0.10);

  /* ── Backward-compat aliases (app.js references these names) ── */
  --bg-primary:    var(--color-paper);
  --bg-surface:    var(--color-paper-2);
  --bg-surface-2:  var(--color-paper-3);
  --bg-surface-3:  var(--color-paper-4);
  --border-default:var(--color-rule);
  --border-subtle: var(--color-rule-subtle);
  --text-primary:  var(--color-ink);
  --text-secondary:var(--color-ink-2);
  --text-muted:    var(--color-muted);
  --text-disabled: var(--color-disabled);
  --green:         var(--color-accent);
  --green-dim:     var(--color-accent-dim);
  --red:           var(--color-red);
  --red-dim:       var(--color-red-dim);
  --amber:         var(--color-amber);
  --amber-dim:     var(--color-amber-dim);
  --blue:          var(--color-blue);
  --blue-dim:      var(--color-blue-dim);
  --accent:        var(--color-accent);

  /* legacy aliases */
  --bg:            var(--color-paper);
  --surface:       var(--color-paper-2);
  --surface2:      var(--color-paper-3);
  --border:        var(--color-rule);
  --border-bright: var(--color-accent-dim);
  --accent2:       var(--color-blue);
  --text:          var(--color-ink);
  --text-dim:      var(--color-ink-2);

  /* ── Typography tokens ── */
  --font-display:  'Space Grotesk', 'Arial', sans-serif;
  --font-body:     'IBM Plex Sans', 'Arial', sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* Type scale · major third (1.25) from 16px body */
  --text-2xs:  0.64rem;    /* ~10px */
  --text-xs:   0.7rem;     /* ~11px */
  --text-sm:   0.8rem;     /* ~13px */
  --text-base: 0.875rem;   /* 14px  */
  --text-md:   1rem;       /* 16px  */
  --text-lg:   1.25rem;    /* 20px  */
  --text-xl:   1.5625rem;  /* 25px  */
  --text-2xl:  1.953rem;   /* ~31px */
  --text-3xl:  2.441rem;   /* ~39px */
  --text-display: clamp(2.25rem, 4vw + 1rem, 3.5rem);

  /* ── Spacing tokens · 4pt base ── */
  --space-3xs: 0.125rem;   /*  2px  */
  --space-2xs: 0.25rem;    /*  4px  */
  --space-xs:  0.5rem;     /*  8px  */
  --space-sm:  0.75rem;    /* 12px  */
  --space-md:  1rem;       /* 16px  */
  --space-lg:  1.5rem;     /* 24px  */
  --space-xl:  2.5rem;     /* 40px  */
  --space-2xl: 4rem;       /* 64px  */
  --space-3xl: 6rem;       /* 96px  */

  /* backward-compat spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ── Border radius ── */
  --radius-card:  2px;
  --radius-badge: 2px;
  --radius-btn:   2px;
  --radius-input: 2px;

  /* ── Motion tokens ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7,  0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:   120ms;
  --dur-short:   220ms;
  --dur-long:    420ms;

  /* ── Z-index scale ── */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}