/* Design tokens: Direction 1, Build log, with per-section palettes (docs/palettes.md). Everyone uses these names only. */
:root {
  /* Type: Schibsted Grotesk, one family */
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --step-display: clamp(3.5rem, 9vw, 9rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 96px;
  --space-9: 160px;
  --section-gap: var(--space-8);

  /* Layout */
  --margin: 20px;
  --gutter: 12px;
  --measure: 68ch;
  --max-w: 1600px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
}

@media (min-width: 768px) {
  :root { --gutter: 16px; }
}
@media (min-width: 1024px) {
  :root { --section-gap: var(--space-9); }
}

/* ---------- Palettes (docs/palettes.md) ---------- */
/* The colour tokens that fade are registered (so the variables themselves interpolate). Every token a panel,
   widget or text uses is here, so nothing on screen switches ahead of the page; only the LED status colours
   switch instantly. initial-value = Sand (base) light. */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #dbd0c0; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #d1c5b5; }
@property --surface-2 { syntax: '<color>'; inherits: true; initial-value: #c6b9a8; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #26211b; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #4c4238; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #07572f; }
@property --accent-ink { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --focus { syntax: '<color>'; inherits: true; initial-value: #07572f; }

:root {
  --dur-palette: 400ms;
  --ease-palette: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

@supports (color: light-dark(#000, #fff)) {
  :root,
  :root[data-palette-active="base"],
  html:not(.palette-live) [data-palette="base"],
  [data-palette-local="base"] {
    --bg: light-dark(#dbd0c0, #1d1914);
    --surface: light-dark(#d1c5b5, #27221c);
    --surface-2: light-dark(#c6b9a8, #332d25);
    --ink: light-dark(#26211b, #efe8df);
    --muted: light-dark(#4c4238, #b5aa9c);
    --accent: light-dark(#07572f, #4fc684);
    --accent-ink: light-dark(#ffffff, #0d1a12);
    --focus: light-dark(#07572f, #4fc684);
    --led-red: light-dark(#b3261e, #ff7a6e);
    --led-yellow: light-dark(#7a5000, #f2c14e);
    --led-green: light-dark(#0b6b3a, #4fc684);
    --led-blue: light-dark(#1f4fbf, #7fa6ff);
  }
  :root[data-palette-active="signal"],
  html:not(.palette-live) [data-palette="signal"],
  [data-palette-local="signal"] {
    --bg: light-dark(#ebe5e3, #191615);
    --surface: light-dark(#e1dad7, #231f1d);
    --surface-2: light-dark(#d6cecb, #2e2926);
    --ink: light-dark(#2b2622, #eee8e5);
    --muted: light-dark(#5f5652, #b3aaa5);
    --accent: light-dark(#0b6b3a, #4fc684);
    --accent-ink: light-dark(#ffffff, #0d1a12);
    --focus: light-dark(#0b6b3a, #4fc684);
    --led-red: light-dark(#b3261e, #ff7a6e);
    --led-yellow: light-dark(#7a5000, #f2c14e);
    --led-green: light-dark(#0b6b3a, #4fc684);
    --led-blue: light-dark(#1f4fbf, #7fa6ff);
  }
  :root[data-palette-active="experience"],
  html:not(.palette-live) [data-palette="experience"],
  [data-palette-local="experience"] {
    --bg: light-dark(#faaf9c, #611708);
    --surface: light-dark(#efa794, #692214);
    --surface-2: light-dark(#e49e8c, #712d1f);
    --ink: light-dark(#1c0600, #fff3ef);
    --muted: light-dark(#402119, #e6d0ca);
    --accent: light-dark(#002d70, #8fe8ff);
    --accent-ink: light-dark(#ffffff, #2c0a04);
    --focus: light-dark(#002d70, #8fe8ff);
    --led-red: light-dark(#b32e2a, #fd7468);
    --led-yellow: light-dark(#7a5b01, #f7c243);
    --led-green: light-dark(#026f31, #67d283);
    --led-blue: light-dark(#2f5db6, #7caafe);
  }
  :root[data-palette-active="skills"],
  html:not(.palette-live) [data-palette="skills"],
  [data-palette-local="skills"] {
    --bg: light-dark(#b1c0f7, #17287e);
    --surface: light-dark(#a8b7ed, #223284);
    --surface-2: light-dark(#a0aee2, #2d3d8b);
    --ink: light-dark(#060a26, #f4f6ff);
    --muted: light-dark(#212747, #d1d5ea);
    --accent: light-dark(#5c0a1c, #ffd84d);
    --accent-ink: light-dark(#ffffff, #0a1239);
    --focus: light-dark(#5c0a1c, #ffd84d);
    --led-red: light-dark(#b32e2a, #fd7468);
    --led-yellow: light-dark(#7a5b01, #f7c243);
    --led-green: light-dark(#026f31, #67d283);
    --led-blue: light-dark(#2f5db6, #7caafe);
  }
  :root[data-palette-active="ceis114"],
  html:not(.palette-live) [data-palette="ceis114"],
  [data-palette-local="ceis114"] {
    --bg: light-dark(#e6e7f1, #121324);
    --surface: light-dark(#dcdde7, #1a1c2d);
    --surface-2: light-dark(#d1d2dd, #28293d);
    --ink: light-dark(#21222c, #e9eaf3);
    --muted: light-dark(#5c5e6a, #9c9dab);
    --accent: light-dark(#964914, #f2a26a);
    --accent-ink: light-dark(#ffffff, #1c0e05);
    --focus: light-dark(#964914, #f2a26a);
    --led-red: light-dark(#b32e2a, #fd7468);
    --led-yellow: light-dark(#7a5b01, #f7c243);
    --led-green: light-dark(#026f31, #67d283);
    --led-blue: light-dark(#2f5db6, #7caafe);
  }
  :root[data-palette-active="ceis110"],
  html:not(.palette-live) [data-palette="ceis110"],
  [data-palette-local="ceis110"] {
    --bg: light-dark(#f0eed0, #181700);
    --surface: light-dark(#e6e4c4, #211f05);
    --surface-2: light-dark(#dbd9b7, #302e12);
    --ink: light-dark(#25241a, #eeede2);
    --muted: light-dark(#5c5a49, #b2b09f);
    --accent: light-dark(#5a3dbf, #b9a8ff);
    --accent-ink: light-dark(#ffffff, #160c33);
    --focus: light-dark(#5a3dbf, #b9a8ff);
    --led-red: light-dark(#b32e2a, #fd7468);
    --led-yellow: light-dark(#7a5b01, #f7c243);
    --led-green: light-dark(#026f31, #67d283);
    --led-blue: light-dark(#2f5db6, #7caafe);
  }
  :root[data-palette-active="plot"],
  html:not(.palette-live) [data-palette="plot"],
  [data-palette-local="plot"] {
    --bg: light-dark(#f6e4d5, #230f00);
    --surface: light-dark(#eed9c8, #2e1702);
    --surface-2: light-dark(#e5cebb, #3e250d);
    --ink: light-dark(#2a2119, #f1e9e3);
    --muted: light-dark(#66584d, #bcaea3);
    --accent: light-dark(#0162a4, #70b7fa);
    --accent-ink: light-dark(#ffffff, #081725);
    --focus: light-dark(#0162a4, #70b7fa);
    --led-red: light-dark(#b32e2a, #fd7468);
    --led-yellow: light-dark(#7a5b01, #f7c243);
    --led-green: light-dark(#026f31, #67d283);
    --led-blue: light-dark(#2e5bb4, #7caafe);
  }
  :root[data-palette-active="netw211"],
  html:not(.palette-live) [data-palette="netw211"],
  [data-palette-local="netw211"] {
    --bg: light-dark(#d6ecf1, #00191e);
    --surface: light-dark(#cae2e9, #012228);
    --surface-2: light-dark(#bdd8df, #01323a);
    --ink: light-dark(#18252a, #e3edf1);
    --muted: light-dark(#4c5e65, #a3b5bb);
    --accent: light-dark(#223843, #9cc3d2);
    --accent-ink: light-dark(#ffffff, #011b1b);
    --focus: light-dark(#223843, #9cc3d2);
    --led-red: light-dark(#b32e2a, #fd7468);
    --led-yellow: light-dark(#7a5b01, #f7c243);
    --led-green: light-dark(#026f31, #67d283);
    --led-blue: light-dark(#2f5db6, #7caafe);
  }
  :root[data-palette-active="smarthome"],
  html:not(.palette-live) [data-palette="smarthome"],
  [data-palette-local="smarthome"] {
    --bg: light-dark(#f8bddb, #500b32);
    --surface: light-dark(#edb4d1, #59173c);
    --surface-2: light-dark(#e3aac7, #622246);
    --ink: light-dark(#220013, #fff2f8);
    --muted: light-dark(#441e33, #e3cdd8);
    --accent: light-dark(#853400, #ff8a2b);
    --accent-ink: light-dark(#ffffff, #240516);
    --focus: light-dark(#853400, #ff8a2b);
    --led-red: light-dark(#b32e2a, #fd7468);
    --led-yellow: light-dark(#7a5b01, #f7c243);
    --led-green: light-dark(#026f31, #67d283);
    --led-blue: light-dark(#2f5db6, #7caafe);
  }
  :root[data-palette-active="about"],
  html:not(.palette-live) [data-palette="about"],
  [data-palette-local="about"] {
    --bg: light-dark(#f7ecd1, #270a09);
    --surface: light-dark(#ede2c7, #311311);
    --surface-2: light-dark(#e3d7bc, #42201e);
    --ink: light-dark(#2a2119, #f1eae3);
    --muted: light-dark(#5f544c, #a79d91);
    --accent: light-dark(#883835, #eabb79);
    --accent-ink: light-dark(#ffffff, #190f03);
    --focus: light-dark(#883835, #eabb79);
    --led-red: light-dark(#b32e2a, #fd7468);
    --led-yellow: light-dark(#7a5b01, #f7c243);
    --led-green: light-dark(#026f31, #67d283);
    --led-blue: light-dark(#2f5db6, #7caafe);
  }
}

/* Browsers without light-dark() (pre-2024): Signal only, in both themes. Same values as before. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --bg: #ebe5e3;
    --surface: #e1dad7;
    --surface-2: #d6cecb;
    --ink: #2b2622;
    --muted: #5f5652;
    --accent: #0b6b3a;
    --accent-ink: #ffffff;
    --focus: #0b6b3a;
    --led-red: #b3261e;
    --led-yellow: #7a5000;
    --led-green: #0b6b3a;
    --led-blue: #1f4fbf;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #191615;
      --surface: #231f1d;
      --surface-2: #2e2926;
      --ink: #eee8e5;
      --muted: #b3aaa5;
      --accent: #4fc684;
      --accent-ink: #0d1a12;
      --focus: #4fc684;
      --led-red: #ff7a6e;
      --led-yellow: #f2c14e;
      --led-green: #4fc684;
      --led-blue: #7fa6ff;
    }
  }
  :root[data-theme="dark"] {
    --bg: #191615;
    --surface: #231f1d;
    --surface-2: #2e2926;
    --ink: #eee8e5;
    --muted: #b3aaa5;
    --accent: #4fc684;
    --accent-ink: #0d1a12;
    --focus: #4fc684;
    --led-red: #ff7a6e;
    --led-yellow: #f2c14e;
    --led-green: #4fc684;
    --led-blue: #7fa6ff;
  }
}

/* ---------- Depth ----------
   Soft shadows that lift buttons, widget panels and the headshot off the page. A warm, low-alpha shade in light
   mode; plain black at higher alpha in dark mode, where a light shadow would read as a glow. */
:root {
  --shade: rgb(40 28 18 / .22);
  --shade-strong: rgb(40 28 18 / .34);
  --shadow-button: 0 1px 2px var(--shade-strong), 0 4px 10px var(--shade);
  --shadow-button-hover: 0 2px 4px var(--shade-strong), 0 8px 18px var(--shade);
  --shadow-button-press: 0 1px 1px var(--shade-strong);
  --shadow-panel: 0 1px 3px var(--shade), 0 10px 28px var(--shade);
  --shadow-photo: 0 4px 10px var(--shade-strong), 0 22px 48px var(--shade);
}
@supports (color: light-dark(#000, #fff)) {
  :root {
    --shade: light-dark(rgb(40 28 18 / .22), rgb(0 0 0 / .58));
    --shade-strong: light-dark(rgb(40 28 18 / .34), rgb(0 0 0 / .78));
  }
}

/* Painting. Without JS each palette section paints its own field; a local block always does. */
html, body { background-color: var(--bg); color: var(--ink); }
html:not(.palette-live) [data-palette],
[data-palette-local] { background-color: var(--bg); color: var(--ink); }

/* With JS: the whole page fades. Every registered colour token animates (above); the LED colours
   switch instantly. palette-ready is added by chapters.js (Home) or site.js (static-palette pages)
   one frame after the first palette is set, so a reload mid-page or a project page never fades in from Signal. */
html.palette-ready {
  transition-property: --bg, --surface, --surface-2, --ink, --muted, --accent, --accent-ink, --focus;
  transition-duration: var(--dur-palette);
  transition-timing-function: var(--ease-palette);
}
[data-palette-local] {
  transition-property: --bg, --surface, --surface-2, --ink, --muted, --accent, --accent-ink, --focus;
  transition-duration: var(--dur-palette);
  transition-timing-function: var(--ease-palette);
}
/* chapters.js blends the colours in step with the scroll and writes them inline; no timed fade on top. */
html.palette-scroll { transition: none; }
/* ...and the "Next project" door blends with the page instead of sliding in as a block of its own colour. */
html.palette-scroll [data-chapter][data-palette-local] {
  --bg: inherit; --surface: inherit; --surface-2: inherit; --ink: inherit; --muted: inherit; --accent: inherit;
  --accent-ink: inherit; --focus: inherit; --led-red: inherit; --led-yellow: inherit; --led-green: inherit; --led-blue: inherit;
  background-color: transparent; transition: none;
}
@media (prefers-reduced-motion: reduce) {
  html.palette-ready, [data-palette-local] { transition: none; }
}