/* David Ngo design language — tokens v1.1 (261015)
   Source of truth for colour, type, spacing. Paste into any web project.
   Light is the default; dark follows the OS or data-theme="dark". */

:root {
  /* --- Core colours (light) --- */
  --dn-ink:        #0E1B2A;   /* primary text, dark surfaces, logo stems */
  --dn-ink-2:      #4A5563;   /* secondary text */
  --dn-muted:      #626C78;   /* captions, metadata, axis labels */
  --dn-paper:      #F7F6F3;   /* page background */
  --dn-surface:    #FFFFFF;   /* cards, chart surface, slides */
  --dn-surface-2:  #EFEDE8;   /* code blocks, quiet panels, table stripes */
  --dn-hairline:   rgba(14, 27, 42, 0.14);  /* every rule and border */
  --dn-grid:       rgba(14, 27, 42, 0.08);  /* chart gridlines, grating texture */

  /* --- Accent: Photon (the only accent) --- */
  --dn-photon:       #E07B1F;  /* marks, logo ring, coupler segment; never text on paper */
  --dn-photon-display: #D3741D; /* photon as display text (32px and up) on paper, 3.1:1 */
  --dn-photon-text:  #A8540F;  /* photon as small text or on buttons (4.9:1 on paper) */
  --dn-photon-soft:  rgba(224, 123, 31, 0.12);  /* highlight wash */

  /* --- Secondary: Signal (links, second data series) --- */
  --dn-signal:       #12A08E;
  --dn-signal-text:  #0D6E69;

  /* --- Status (fixed, never themed, always with icon + label) --- */
  --dn-good:     #0CA30C;
  --dn-warning:  #FAB219;
  --dn-serious:  #EC835A;
  --dn-critical: #D03B3B;

  /* --- Data: categorical, fixed order, never cycled --- */
  --dn-s1: #2A64AE;  /* silicon blue */
  --dn-s2: #E07B1F;  /* photon amber */
  --dn-s3: #12A08E;  /* oxide teal */
  --dn-s4: #CFA000;  /* film gold */
  --dn-s5: #C9528E;  /* film magenta */
  --dn-s6: #3E8E2E;  /* green */
  --dn-s7: #6B5BD2;  /* violet */
  --dn-s8: #D2473F;  /* red */

  /* --- Data: sequential / ordinal ramp (one hue, light -> dark) --- */
  --dn-r1: #93B0D8; --dn-r2: #7399CB; --dn-r3: #5581BB; --dn-r4: #3F6AA4;
  --dn-r5: #2E5690; --dn-r6: #214479; --dn-r7: #163360;
  --dn-r0: #C7D7EC;  /* "near zero" step, heatmaps only */

  /* --- Data: diverging (signal <- neutral -> photon) --- */
  --dn-div-neg: #12A08E; --dn-div-mid: #E6E4DF; --dn-div-pos: #E07B1F;

  /* --- Type --- */
  --dn-font-sans: "IBM Plex Sans", "Inter", "Segoe UI", system-ui, sans-serif;
  --dn-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --dn-lh-body: 1.5;
  --dn-lh-tight: 1.15;
  --dn-track-label: 0.08em;   /* uppercase mono labels */
  --dn-track-display: -0.015em;

  /* --- Type scale (web; ratio 1.25 from 16px) --- */
  --dn-t-caption: 0.8125rem;  /* 13px, mono */
  --dn-t-body:    1rem;       /* 16px */
  --dn-t-lead:    1.25rem;    /* 20px */
  --dn-t-h3:      1.5625rem;  /* 25px */
  --dn-t-h2:      1.953rem;   /* 31px */
  --dn-t-h1:      2.441rem;   /* 39px */
  --dn-t-display: 3.052rem;   /* 49px */
  --dn-t-hero:    4rem;       /* 64px, web hero headline, once per page; clamp down to 38px on a phone */
  --dn-t-label:   0.75rem;    /* 12px, uppercase tracked mono labels only */

  /* --- Space (8px base, 4px fine) --- */
  --dn-sp-1: 4px;  --dn-sp-2: 8px;  --dn-sp-3: 16px; --dn-sp-4: 24px;
  --dn-sp-5: 32px; --dn-sp-6: 48px; --dn-sp-7: 64px; --dn-sp-8: 96px;

  /* --- Shape --- */
  --dn-radius: 2px;        /* the only radius. No pills, no 12px cards. */
  --dn-rule: 1px;          /* hairline weight */
  --dn-coupler-len: 24px;  /* amber segment of the coupler rule */
  --dn-coupler-gap: 8px;

  /* --- Motion (screens only; see guide section 7) ---
     Static by default. Something moves only to show structure or a mechanism, once.
     Honour prefers-reduced-motion: static, nothing lost. */
  --dn-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);  /* the one curve: ease-out, no bounce */
  --dn-dur-1:    0.3s;   /* small reveal, cross-fade */
  --dn-dur-2:    0.5s;   /* block reveal */
  --dn-dur-draw: 0.6s;   /* a rule or coupler drawing itself */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dn-ink: #EDEBE6; --dn-ink-2: #B3BAC4; --dn-muted: #8A94A0;
    --dn-paper: #0E1B2A; --dn-surface: #16263A; --dn-surface-2: #1E3048;
    --dn-hairline: rgba(237, 235, 230, 0.16); --dn-grid: rgba(237, 235, 230, 0.08);
    --dn-photon: #F0923A; --dn-photon-display: #F0923A; --dn-photon-text: #F0923A; --dn-photon-soft: rgba(240, 146, 58, 0.16);
    --dn-signal: #2FBFA6; --dn-signal-text: #2FBFA6;
    --dn-s1: #4F86DC; --dn-s2: #C96E1C; --dn-s3: #21A88C; --dn-s4: #B38A0C;
    --dn-s5: #CB6398; --dn-s6: #4E9E3E; --dn-s7: #8B7EE6; --dn-s8: #DC5C58;
    --dn-r1: #3B5A86; --dn-r2: #4A6FA2; --dn-r3: #5B86B9; --dn-r4: #6F9CCB;
    --dn-r5: #89B2DA; --dn-r6: #A6C7E6; --dn-r7: #C4DAEF; --dn-r0: #2B4568;
    --dn-div-neg: #21A88C; --dn-div-mid: #334457; --dn-div-pos: #C96E1C;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --dn-ink: #EDEBE6; --dn-ink-2: #B3BAC4; --dn-muted: #8A94A0;
  --dn-paper: #0E1B2A; --dn-surface: #16263A; --dn-surface-2: #1E3048;
  --dn-hairline: rgba(237, 235, 230, 0.16); --dn-grid: rgba(237, 235, 230, 0.08);
  --dn-photon: #F0923A; --dn-photon-display: #F0923A; --dn-photon-text: #F0923A; --dn-photon-soft: rgba(240, 146, 58, 0.16);
  --dn-signal: #2FBFA6; --dn-signal-text: #2FBFA6;
  --dn-s1: #4F86DC; --dn-s2: #C96E1C; --dn-s3: #21A88C; --dn-s4: #B38A0C;
  --dn-s5: #CB6398; --dn-s6: #4E9E3E; --dn-s7: #8B7EE6; --dn-s8: #DC5C58;
  --dn-r1: #3B5A86; --dn-r2: #4A6FA2; --dn-r3: #5B86B9; --dn-r4: #6F9CCB;
  --dn-r5: #89B2DA; --dn-r6: #A6C7E6; --dn-r7: #C4DAEF; --dn-r0: #2B4568;
  --dn-div-neg: #21A88C; --dn-div-mid: #334457; --dn-div-pos: #C96E1C;
  color-scheme: dark;
}

/* --- Base --- */
body { background: var(--dn-paper); color: var(--dn-ink); font-family: var(--dn-font-sans); line-height: var(--dn-lh-body); }
h1, h2, h3 { font-weight: 600; line-height: var(--dn-lh-tight); letter-spacing: var(--dn-track-display); text-wrap: balance; }
code, pre, .dn-mono { font-family: var(--dn-font-mono); }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--dn-photon); text-underline-offset: 0.15em; }

/* --- Signature devices --- */
/* Coupler rule: a hairline, a gap, a short photon segment at the end. */
.dn-coupler { display: flex; align-items: center; gap: var(--dn-coupler-gap); height: 2px; margin-block: var(--dn-sp-3); }
.dn-coupler::before { content: ""; flex: 1; height: 1px; background: var(--dn-hairline); }
.dn-coupler::after  { content: ""; width: var(--dn-coupler-len); height: 2px; background: var(--dn-photon); }

/* Title block: mono metadata line, YYMMDD first. */
.dn-titleblock { font-family: var(--dn-font-mono); font-size: var(--dn-t-caption); letter-spacing: var(--dn-track-label); text-transform: uppercase; color: var(--dn-muted); }

/* Eyebrow label above a heading. */
.dn-label { font-family: var(--dn-font-mono); font-size: var(--dn-t-caption); letter-spacing: var(--dn-track-label); text-transform: uppercase; color: var(--dn-muted); }

/* Panel: hairline, surface, 2px radius, no shadow. */
.dn-panel { background: var(--dn-surface); border: var(--dn-rule) solid var(--dn-hairline); border-radius: var(--dn-radius); padding: var(--dn-sp-4); }

/* Buttons: ink primary, hairline secondary. Never pill-shaped. */
.dn-btn { font: 500 var(--dn-t-body)/1 var(--dn-font-sans); padding: 10px 16px; border-radius: var(--dn-radius); border: 1px solid var(--dn-ink); background: var(--dn-ink); color: var(--dn-paper); cursor: pointer; }
.dn-btn--quiet { background: transparent; color: var(--dn-ink); border-color: var(--dn-hairline); }