/* ==========================================================================
   Systems Atlas — tokens, reset, typography
   Light is the base palette. Dark redefines tokens in two guarded blocks so
   the OS setting and an explicit toggle both resolve correctly.
   ========================================================================== */

:root {
  /* --- ground & surface (Fanout-style flat neutrals) --- */
  --ground:        #f7f7f8;
  --ground-deep:   #f0f0f2;
  --surface:       #ffffff;
  --surface-2:     #fafafa;
  --surface-sunk:  #f4f4f5;
  --veil:          rgba(247, 247, 248, 0.86);

  /* --- ink --- */
  --ink:           #1d1d1d;
  --ink-2:         #4a4a4a;
  --ink-3:         #5a5a5a;
  --ink-4:         #6b6b6b;   /* 4.5:1 on every light surface (WCAG AA) */

  /* --- lines --- */
  --line:          #e8e8ea;
  --line-2:        #dedee2;
  --line-strong:   #c9c9cf;

  /* --- accent (monochrome: primary is ink) --- */
  --accent:        #1d1d1d;
  --accent-ink:    #ffffff;
  --accent-soft:   rgba(29, 29, 29, 0.06);
  --accent-line:   rgba(29, 29, 29, 0.32);

  /* --- semantic --- */
  --good:          #0f9d58;
  --good-soft:     rgba(15, 157, 88, 0.10);
  --warn:          #e8822a;
  --warn-soft:     rgba(232, 130, 42, 0.11);
  --bad:           #dc2626;
  --bad-soft:      rgba(220, 38, 38, 0.09);

  /* --- text that must stay readable (WCAG AA, 4.5:1) ---
     Track hues and the good/warn/bad tones are bright enough for fills but too light for small
     text on a white ground. Text made from a hue is capped at --text-lmax (OKLCH lightness);
     the *-text tones are the darker versions for words; --on-hue is the text on a hue fill. */
  --text-lmax:     0.5;
  --on-hue:        #ffffff;
  --good-text:     #00793a;
  --warn-text:     #ad4e00;
  --bad-text:      #b91c1c;
  --code-k: #6e56cf; --code-s: #007f3c; --code-n: #b35200; --code-c: #6b6b6b;

  /* --- track identity hues (Fanout category palette) --- */
  --t-foundations: #2f7cf6;
  --t-network:     #2fa3d6;
  --t-data:        #6e56cf;
  --t-distributed: #c2548f;
  --t-scale:       #e8822a;
  --t-reliability: #2ab673;
  --t-architecture:#b0a867;
  --t-lld:         #e4402c;
  --t-hld:         #2f5fad;
  --t-interview:   #6e6e6e;
  --t-search:      #0d9488;
  --t-sketches:    #7c3aed;
  --t-realtime:    #db2777;
  --t-media:       #b7860b;
  --t-company:     #475569;
  --t-dbdeep:      #4d7c0f;
  --t-cachedeep:   #9a3412;
  --t-engines:     #155e75;

  /* --- shadow (hairline + soft) --- */
  --lift-1: 0 1px 2px #3b3b3b17, 0 0 0 1px #3b3b3b03;
  --lift-2: 0 1px 2px #3b3b3b17, 0 2px 4px #3b3b3b0d, 0 0 0 1px #3b3b3b03;
  --lift-3: 0 2px 4px #3b3b3b0d, 0 4px 8px #3b3b3b17, 0 8px 16px #3b3b3b1a, 0 0 0 1px #3b3b3b03;

  /* --- type --- */
  --sans: "Overused Grotesk", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "IBM Plex Serif", ui-serif, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display: "Departure Mono", "IBM Plex Mono", ui-monospace, monospace;

  --fs-micro: 0.6875rem;   /* 11 */
  --fs-fine:  0.75rem;     /* 12 */
  --fs-small: 0.8125rem;   /* 13 */
  --fs-body:  0.9375rem;   /* 15 */
  --fs-read:  1.0625rem;   /* 17 — reading size */
  --fs-lead:  1.25rem;
  --fs-h3:    1.3125rem;
  --fs-h2:    1.75rem;
  --fs-h1:    2.5rem;
  --fs-hero:  clamp(2.35rem, 6.2vw, 4.1rem);

  /* --- geometry --- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
  --shell: 1180px;
  --measure: 68ch;
  --chrome-h: 52px;

  /* --- motion --- */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;
  --t-mid: .32s;
  --t-slow: .52s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:       #111213;
    --ground-deep:  #0d0e0f;
    --surface:      #191a1c;
    --surface-2:    #1e1f21;
    --surface-sunk: #151617;
    --veil:         rgba(17, 18, 19, 0.86);

    --ink:   #f2f4f7;
    --ink-2: #c9ced6;
    --ink-3: #a9b0ba;
    --ink-4: #8a929e;

    --line:        #2a2b2e;
    --line-2:      #36373b;
    --line-strong: #4c4e54;

    --accent:      #f2f4f7;
    --accent-ink:  #111315;
    --accent-soft: rgba(242, 244, 247, 0.08);
    --accent-line: rgba(242, 244, 247, 0.36);

    --good: #4ed08a; --good-soft: rgba(78, 208, 138, 0.14);
    --warn: #f0a45b; --warn-soft: rgba(240, 164, 91, 0.14);
    --bad:  #f87171; --bad-soft:  rgba(248, 113, 113, 0.14);

    --text-lmax: 1; --on-hue: #111213;
    --good-text: var(--good); --warn-text: var(--warn); --bad-text: var(--bad);
    --code-k: var(--t-data); --code-s: var(--good); --code-n: var(--t-scale); --code-c: var(--ink-4);

    --t-foundations: #6ea2ff;
    --t-network:     #5cc0e8;
    --t-data:        #a594f0;
    --t-distributed: #e58bbd;
    --t-scale:       #f0a45b;
    --t-reliability: #4ed08a;
    --t-architecture:#cfc78a;
    --t-lld:         #f87171;
    --t-hld:         #7fa9ff;
    --t-interview:   #a9b0ba;
    --t-search:      #2dd4bf;
    --t-sketches:    #b39bfa;
    --t-realtime:    #f472b6;
    --t-media:       #e8c547;
    --t-company:     #94a3b8;
    --t-dbdeep:      #bef264;
    --t-cachedeep:   #fb923c;
    --t-engines:     #67e8f9;

    --lift-1: 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
    --lift-2: 0 2px 6px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
    --lift-3: 0 12px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
  }
}

:root[data-theme="dark"] {
  --ground:       #111213;
  --ground-deep:  #0d0e0f;
  --surface:      #191a1c;
  --surface-2:    #1e1f21;
  --surface-sunk: #151617;
  --veil:         rgba(17, 18, 19, 0.86);

  --ink:   #f2f4f7;
  --ink-2: #c9ced6;
  --ink-3: #a9b0ba;
  --ink-4: #8a929e;

  --line:        #2a2b2e;
  --line-2:      #36373b;
  --line-strong: #4c4e54;

  --accent:      #f2f4f7;
  --accent-ink:  #111315;
  --accent-soft: rgba(242, 244, 247, 0.08);
  --accent-line: rgba(242, 244, 247, 0.36);

  --good: #4ed08a; --good-soft: rgba(78, 208, 138, 0.14);
  --warn: #f0a45b; --warn-soft: rgba(240, 164, 91, 0.14);
  --bad:  #f87171; --bad-soft:  rgba(248, 113, 113, 0.14);

  --text-lmax: 1; --on-hue: #111213;
  --good-text: var(--good); --warn-text: var(--warn); --bad-text: var(--bad);
  --code-k: var(--t-data); --code-s: var(--good); --code-n: var(--t-scale); --code-c: var(--ink-4);

  --t-foundations: #6ea2ff;
  --t-network:     #5cc0e8;
  --t-data:        #a594f0;
  --t-distributed: #e58bbd;
  --t-scale:       #f0a45b;
  --t-reliability: #4ed08a;
  --t-architecture:#cfc78a;
  --t-lld:         #f87171;
  --t-hld:         #7fa9ff;
  --t-interview:   #a9b0ba;
  --t-search:      #2dd4bf;
  --t-sketches:    #b39bfa;
  --t-realtime:    #f472b6;
  --t-media:       #e8c547;
  --t-company:     #94a3b8;
  --t-dbdeep:      #bef264;
  --t-cachedeep:   #fb923c;
  --t-engines:     #67e8f9;

  --lift-1: 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
  --lift-2: 0 2px 6px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  --lift-3: 0 12px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img, svg, canvas { max-width: 100%; }
img { height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
[hidden] { display: none !important; }
/* read by screen readers, not drawn: headings that give a grid of cards its place in the outline */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -0.021em; text-wrap: balance; line-height: 1.15; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.028em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.024em; }
h3 { font-size: var(--fs-h3); }
p  { margin: 0; }

code, kbd, samp, pre { font-family: var(--mono); font-size: 0.875em; font-variant-ligatures: none; }
kbd {
  font-size: var(--fs-micro); padding: .12em .42em; border-radius: 5px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-3);
  box-shadow: 0 1px 0 var(--line-2);
}

::selection { background: var(--accent-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 900;
  padding: .55rem .9rem; border-radius: var(--r-sm);
  background: var(--surface); box-shadow: var(--lift-2); color: var(--ink);
  transform: translateY(-160%);
  transition: transform var(--t-mid) var(--ease);
}
.skip:focus { transform: translateY(0); }

/* scrollbars, quiet */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: content-box; }

/* ---------- motion policy ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
:root[data-motion="still"] *, :root[data-motion="still"] *::before, :root[data-motion="still"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}