/* =============================================================
   kimhedlund.se — colors_and_type.css
   All OKLCH. No #000, no #fff. Public Sans + JetBrains Mono only.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Sky + sun (the world's lighting) ---------------- */
  --sky-dawn:        oklch(20% 0.06 275);   /* far-left, ESA night */
  --sky-noon:        oklch(62% 0.10 235);   /* mid timeline, midday */
  --sky-day:         oklch(78% 0.12 75);    /* far-right, warm afternoon */
  --sun:             oklch(92% 0.18 80);    /* sun core */
  --sun-glow:        oklch(85% 0.14 75 / 0.45); /* soft alpha for glow */
  --star:            oklch(96% 0.02 250 / 0.85); /* tiny stars in ESA sky */

  /* ---------- Ground ----------------------------------------- */
  --ground:          oklch(22% 0.04 100);
  --ground-shade:    oklch(18% 0.03 100);   /* 2px below each building */
  --path:            oklch(38% 0.04 95);    /* the path Kim walks */
  --path-dash:       oklch(50% 0.05 90);    /* dashed segment markers */

  /* ---------- Zone identity (per-era brick colors) ----------- */
  --brick-warm:      oklch(45% 0.08 35);    /* KI MEB tegelröd */
  --brick-deep:      oklch(35% 0.07 35);    /* KI shadow side */
  --brick-window:    oklch(75% 0.10 80);    /* KI lit windows */

  --ochre:           oklch(38% 0.08 90);    /* Lexicon */
  --ochre-light:     oklch(55% 0.10 90);    /* Lexicon roof */

  --glass-cool:      oklch(32% 0.05 230);   /* Advania glass */
  --glass-deep:      oklch(24% 0.05 235);   /* Advania shadow */
  --glass-lit:       oklch(68% 0.09 225);   /* Advania lit windows */
  --client-yellow:   oklch(72% 0.13 90);    /* Ramirent strip */

  --umber-warm:      oklch(40% 0.06 60);    /* Solenergi facade */
  --umber-deep:      oklch(30% 0.05 60);
  --umber-light:     oklch(60% 0.07 60);

  --solar-panel:     oklch(28% 0.10 250);   /* deep blue silicon */
  --solar-edge:      oklch(45% 0.06 250);

  /* ---------- Accent (used SPARINGLY) ------------------------ */
  --sun-orange:      oklch(55% 0.18 60);    /* the "NOW" marker */
  --energy-particle: oklch(85% 0.16 85);    /* single rising spark */
  --led-green:       oklch(72% 0.18 145);   /* server-rack LEDs */
  --crt-blue:        oklch(60% 0.14 240);   /* the CRT in ESA window */

  /* ---------- Neutrals (always tinted) ----------------------- */
  --neutral-100:     oklch(96% 0.01 80);    /* lightest panel bg */
  --neutral-200:     oklch(90% 0.01 80);
  --neutral-300:     oklch(80% 0.015 80);
  --neutral-500:     oklch(55% 0.02 80);
  --neutral-700:     oklch(35% 0.02 80);
  --neutral-900:     oklch(18% 0.02 80);    /* deepest tinted "black" */

  /* ---------- Foreground / text ------------------------------ */
  --fg-1:            var(--neutral-100);    /* on dark sky */
  --fg-2:            oklch(82% 0.02 80);    /* secondary on dark */
  --fg-3:            oklch(65% 0.02 80);    /* muted */
  --fg-on-light:     var(--neutral-900);
  --fg-link:         var(--sun-orange);

  /* ---------- Panel + tooltip surface ------------------------ */
  --panel-bg:        oklch(22% 0.02 80 / 0.92);
  --panel-border:    oklch(40% 0.03 80);
  --panel-border-active: var(--sun-orange);

  /* ---------- Type ------------------------------------------- */
  --font-sans:  "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", "Sometype Mono", ui-monospace, monospace;

  /* Body scale — hierarchy by weight + size, never color */
  --fs-mono-xs:   10px;
  --fs-mono-sm:   11px;
  --fs-mono-md:   13px;
  --fs-body-sm:   13px;
  --fs-body:      15px;
  --fs-body-lg:   17px;
  --fs-h3:        20px;
  --fs-h2:        24px;
  --fs-h1:        32px;

  --lh-tight:     1.15;
  --lh-body:      1.5;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --tracking-mono-caps:  0.08em;
  --tracking-mono-label: 0.04em;

  /* ---------- Spacing (4px pixel grid) ----------------------- */
  --sp-0:   0px;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;

  /* ---------- Borders + radii ------------------------------- */
  --border-hair:   1px solid var(--panel-border);
  --border-thick:  2px solid var(--panel-border-active);
  --radius-0:  0px;
  --radius-1:  2px;          /* max radius anywhere in UI */

  /* ---------- Motion ---------------------------------------- */
  --pan-duration:     36s;
  --walk-step:        0.55s;          /* 2-frame step cadence */
  --sun-pulse:        4s;
  --ease-sober:       cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-panel:        120ms;
  --dur-hover:        80ms;

  /* ---------- Z-layers --------------------------------------- */
  --z-sky:        0;
  --z-buildings:  10;
  --z-props:      20;
  --z-kim:        30;
  --z-hud:        40;
  --z-tooltip:    50;
  --z-overlay:    60;
}

/* =============================================================
   Semantic element styles
   Apply these directly to tags — h1/h2/p/code/etc — so writing
   plain HTML inside this system Just Works.
   ============================================================= */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--sky-dawn);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--fg-1);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  margin: 0;
  text-wrap: pretty;
  max-width: 62ch;
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-thickness var(--dur-hover) var(--ease-sober);
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 2px solid var(--sun-orange);
  outline-offset: 2px;
}

/* Mono is used for labels, timestamps, metadata, facade signage.
   It is NEVER used as body text. */
code, kbd, samp, .mono, .label, .timestamp {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-mono-label);
}

.label-caps {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-mono-caps);
  text-transform: uppercase;
}

/* The card / panel surface used for tooltips + atlas detail */
.panel {
  background: var(--panel-bg);
  border: var(--border-hair);
  border-radius: var(--radius-1);
  padding: var(--sp-3);
  color: var(--fg-1);
}
.panel--active { border-color: var(--panel-border-active); }

button {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-mono-label);
  background: transparent;
  color: var(--fg-1);
  border: var(--border-hair);
  border-radius: var(--radius-0);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-sober);
}
button:hover  { border-color: var(--panel-border-active); }
button:active { border-width: 2px; padding: calc(var(--sp-2) - 1px) calc(var(--sp-3) - 1px); }

/* Skip-to-list link, visible only on focus */
.skip-link {
  position: fixed;
  top: var(--sp-2);
  left: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--neutral-900);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-decoration: none;
  border: var(--border-hair);
  transform: translateY(-200%);
  transition: transform var(--dur-panel) var(--ease-sober);
  z-index: var(--z-overlay);
}
.skip-link:focus { transform: translateY(0); }

/* Reduced motion: kill all anims, the timeline becomes a static list */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}