/*
 * Hallmark · genre: modern-minimal · macrostructure: Split Studio
 * theme: Cobalt · tone: technical · anchor hue: 256 (electric cobalt)
 * nav: N5 Floating pill · footer: Ft2 Inline single line
 * enrichment: code card (Tier A — pure CSS/HTML)
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 */

:root {
  /* ─── Colour — Cobalt palette ───────────────────────────────── */
  --color-paper:        oklch(98.5% 0.004 250);   /* cool engineered near-white */
  --color-paper-2:      oklch(96%   0.005 252);   /* surface elevation */
  --color-paper-3:      oklch(93%   0.006 254);   /* inset / code bg */
  --color-rule:         oklch(89%   0.006 252);   /* hairline borders */
  --color-rule-2:       oklch(83%   0.008 254);   /* stronger divider */
  --color-neutral:      oklch(50%   0.014 256);   /* mid text */
  --color-muted:        oklch(62%   0.010 254);   /* de-emphasised */
  --color-ink:          oklch(20%   0.020 258);   /* primary headings */
  --color-ink-2:        oklch(34%   0.018 257);   /* body copy */
  --color-graphite:     oklch(18%   0.018 260);   /* dark code card */
  --color-graphite-2:   oklch(24%   0.018 260);   /* code card border */
  --color-accent:       oklch(58%   0.20  256);   /* electric cobalt — signal only */
  --color-accent-light: oklch(94%   0.06  256);   /* tinted accent surface */
  --color-accent-ink:   oklch(100%  0     0);     /* text on cobalt fill */
  --color-focus:        oklch(58%   0.22  256);   /* focus ring */
  --color-ok:           oklch(60%   0.14  160);   /* 200 OK chip */
  --color-ok-bg:        oklch(95%   0.05  160);

  /* ─── Derived surfaces (alpha) ──────────────────────────────── */
  --color-nav-bg:       oklch(98.5% 0.004 250 / 0.88);  /* pill nav backdrop */
  --color-nav-bg-open:  oklch(98.5% 0.004 250 / 0.98);  /* mobile drawer */
  --color-shadow-scroll: oklch(20%  0.018 258 / 0.08);  /* nav scroll shadow */
  --color-shadow-card:   oklch(58%  0.20  256 / 0.08);  /* project card hover */
  --color-lightbox-bg:   oklch(10%  0.010 258 / 0.92);  /* lightbox overlay */
  --color-lightbox-close-bg:  oklch(98.5% 0.004 250 / 0.12); /* close btn */
  --color-lightbox-close-bg-hover: oklch(98.5% 0.004 250 / 0.22);
  --color-lightbox-close-border:   oklch(100% 0 0 / 0.15);
  --color-lightbox-close-ink:      oklch(95%  0.004 250);
  --color-dot-inactive:  oklch(20%  0.020 258 / 0.25);  /* carousel dot */

  /* ─── Code card token colours ────────────────────────────────── */
  --color-tok-comment:  oklch(45%   0.010 254);
  --color-tok-str:      oklch(72%   0.12  160);
  --color-tok-fn:       oklch(78%   0.10   56);
  --color-tok-muted:    oklch(55%   0.010 254);
  --color-tok-white:    oklch(90%   0.006 252);
  --color-tok-filename: oklch(50%   0.010 254);

  /* ─── Typography — Space Grotesk · Inter · JetBrains Mono ──── */
  --font-display:       "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:          "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:          "JetBrains Mono", ui-monospace, monospace;

  /* ─── Type scale (ratio 1.25) ────────────────────────────────── */
  --text-xs:            0.64rem;    /* 10.24px */
  --text-sm:            0.8rem;     /* 12.8px  */
  --text-base:          1rem;       /* 16px    */
  --text-md:            1.125rem;   /* 18px    */
  --text-lg:            1.375rem;   /* 22px    */
  --text-xl:            1.75rem;    /* 28px    */
  --text-2xl:           2.25rem;    /* 36px    */
  --text-display:       clamp(2.5rem, 4.5vw + 0.5rem, 4rem);
  --text-display-s:     clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);

  /* ─── Spacing (4pt scale) ────────────────────────────────────── */
  --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:           2rem;       /* 32px */
  --space-2xl:          3rem;       /* 48px */
  --space-3xl:          4.5rem;     /* 72px */
  --space-4xl:          6rem;       /* 96px */

  /* ─── Motion ─────────────────────────────────────────────────── */
  --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:          200ms;
  --dur-reveal:         600ms;
  --dur-stagger:        100ms;

  /* ─── Radii — "drawn with a ruler" ──────────────────────────── */
  --radius-xs:          3px;
  --radius-sm:          4px;
  --radius-md:          6px;
  --radius-lg:          10px;
  --radius-pill:        999px;

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

  /* ─── Rules ──────────────────────────────────────────────────── */
  --rule:               1px solid var(--color-rule);
  --rule-strong:        1px solid var(--color-rule-2);

  /* ─── Shadows ────────────────────────────────────────────────── */
  --shadow-code-card:   0 1px 3px var(--color-graphite-2);
}