/* ==========================================================================
   Design tokens — shared by the public site and the CMS.
   Palette: ivory paper, walnut brown ink, olive for actions, brown for scroll UI.
   Theme switches are data attributes on <html> written from CMS settings:
   data-motion, data-radius, data-depth, data-spacing, data-accent-level.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces — ivory, warm, never pure white */
  --bg-0: #F2ECDD;
  --bg-1: #EAE2CF;
  --bg-2: #E2D8C1;
  --bg-3: #D7CBB0;
  --line: #DDD2BA;
  --line-2: #CBBD9F;

  /* Ink — walnut brown */
  --text-0: #2A2118;
  --text-1: #574837;
  --text-2: #6B5B46;
  --metal: #3F3326;

  /* Accent (CMS-controlled) — olive for buttons and active states */
  --accent: #616C2C;
  --accent-ink: #F7F2E6;
  --accent-mix: 100%;
  --accent-ui: color-mix(in srgb, var(--accent) var(--accent-mix), var(--text-1));
  --accent-dim: color-mix(in srgb, var(--accent-ui) 70%, var(--bg-0));
  --accent-wash: color-mix(in srgb, var(--accent-ui) 12%, transparent);

  /* Brown — scroll UI, circuit copper, secondary material */
  --brown: #7A5A3C;
  --brown-dim: #A88B6A;
  --copper: #8E6440;
  --copper-dim: #C2A67F;

  /* Dark panels (code editor, terminals) sit on the ivory page like devices */
  --panel: #2B241C;
  --panel-2: #231D16;
  --panel-line: #3C3327;
  --panel-ink: #EFE7D4;
  --panel-ink-1: #BFB298;
  --panel-ink-2: #A09279;
  --syn-key: #B8C375;
  --syn-str: #DDB07E;
  --syn-prop: #E6DDC8;
  --syn-com: #8B7E66;
  --syn-pun: #A79A80;

  --danger: #A8472F;
  --ok: #56662B;

  /* Type */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --display-wdth: 112;

  /* Geometry */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(72px, 10vw, 136px);
  --maxw: 1320px;

  /* Material — soft light from top-left on warm paper */
  --hl: rgba(255, 253, 246, 0.85);
  --hl-soft: rgba(255, 253, 246, 0.7);
  --sd: rgba(92, 68, 38, 0.2);
  --sh-raised:
    inset 0 1px 0 var(--hl),
    inset 0 -1px 0 rgba(92, 68, 38, 0.08),
    4px 6px 14px var(--sd),
    -3px -3px 10px var(--hl-soft);
  --sh-raised-hi:
    inset 0 1px 0 var(--hl),
    inset 0 -1px 0 rgba(92, 68, 38, 0.08),
    7px 11px 22px rgba(92, 68, 38, 0.24),
    -4px -4px 12px var(--hl-soft);
  --sh-pressed:
    inset 2px 3px 6px rgba(92, 68, 38, 0.22),
    inset -2px -2px 5px rgba(255, 253, 246, 0.75);
  --sh-inset:
    inset 2px 2px 5px rgba(92, 68, 38, 0.16),
    inset -2px -2px 4px rgba(255, 253, 246, 0.8);
  --sh-frame:
    0 0 0 1px rgba(92, 68, 38, 0.08),
    10px 18px 44px rgba(92, 68, 38, 0.22);
  --face: linear-gradient(180deg, #F8F3E7 0%, #EDE5D2 100%);
  --face-hi: linear-gradient(180deg, #FBF7EC 0%, #F0E9D7 100%);

  /* Motion — unhurried, cinematic */
  --motion-fast: 160ms;
  --motion-normal: 320ms;
  --motion-slow: 640ms;
  --motion-spring: 620ms;
  --motion-emphasis: 1000ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.25, 1);
  --ease-spring: cubic-bezier(0.3, 1.25, 0.55, 1);
  --reveal-y: 28px;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* Soft spring: ~5% overshoot, settles cleanly. Generated from k=170, c=18. */
    --ease-spring: linear(0, 0.022, 0.081, 0.163, 0.259, 0.361, 0.464, 0.562, 0.653, 0.734, 0.806, 0.866, 0.917, 0.957, 0.989, 1.012, 1.029, 1.04, 1.047, 1.05, 1.05, 1.047, 1.044, 1.039, 1.034, 1.029, 1.024, 1.019, 1.015, 1.011, 1.008, 1.005, 1);
  }
}

/* Brown scrollbars everywhere */
html { scrollbar-color: var(--brown) var(--bg-1); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--brown); border-radius: 10px; border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: #5E4430; }

/* ---- Theme variants ---- */
[data-radius='sharp'] { --r-xs: 1px; --r-sm: 2px; --r-md: 3px; --r-lg: 4px; }
[data-radius='round'] { --r-xs: 5px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; }

[data-depth='flat'] {
  --sh-raised: inset 0 1px 0 var(--hl), 0 0 0 1px var(--line-2);
  --sh-raised-hi: inset 0 1px 0 var(--hl), 0 0 0 1px var(--brown-dim);
  --sh-frame: 0 0 0 1px var(--line-2);
}
[data-depth='deep'] {
  --sh-raised:
    inset 0 1px 0 var(--hl),
    inset 0 -1px 0 rgba(92, 68, 38, 0.1),
    7px 10px 22px rgba(92, 68, 38, 0.28),
    -5px -5px 14px var(--hl-soft);
  --sh-raised-hi:
    inset 0 1px 0 var(--hl),
    inset 0 -1px 0 rgba(92, 68, 38, 0.1),
    11px 16px 32px rgba(92, 68, 38, 0.32),
    -6px -6px 16px var(--hl-soft);
  --sh-frame: 0 0 0 1px rgba(92, 68, 38, 0.1), 16px 26px 64px rgba(92, 68, 38, 0.3);
}

[data-spacing='compact'] { --section-y: clamp(56px, 7vw, 96px); }
[data-spacing='generous'] { --section-y: clamp(96px, 13vw, 184px); }

[data-accent-level='quiet'] { --accent-mix: 75%; }
[data-accent-level='strong'] { --accent-wash: color-mix(in srgb, var(--accent-ui) 18%, transparent); }

[data-motion='subtle'] {
  --motion-normal: 220ms;
  --motion-slow: 420ms;
  --motion-spring: 420ms;
  --motion-emphasis: 620ms;
  --ease-spring: var(--ease-out);
  --reveal-y: 12px;
}
[data-motion='cinematic'] {
  --motion-normal: 380ms;
  --motion-slow: 820ms;
  --motion-spring: 760ms;
  --motion-emphasis: 1300ms;
  --reveal-y: 40px;
}

@media (prefers-reduced-motion: reduce) {
  :root, [data-motion] {
    /* Functional fades stay (short); movement goes. */
    --motion-fast: 1ms;
    --motion-normal: 140ms;
    --motion-slow: 160ms;
    --motion-spring: 1ms;
    --motion-emphasis: 180ms;
    --ease-spring: linear;
    --reveal-y: 0px;
  }
}