/* ==========================================================================
   naturfilms — design tokens
   One place for colour, type, space and timing. Change here, changes everywhere.
   ========================================================================== */

:root {
  /* ---- Type ------------------------------------------------------------ */
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
               "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono",
               Consolas, "Liberation Mono", monospace;

  /* Fluid type scale — clamps between 360px and 1600px viewports */
  --fs-xs:    clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-sm:    clamp(0.82rem, 0.79rem + 0.14vw, 0.92rem);
  --fs-base:  clamp(0.98rem, 0.94rem + 0.20vw, 1.10rem);
  --fs-md:    clamp(1.12rem, 1.05rem + 0.34vw, 1.32rem);
  --fs-lg:    clamp(1.38rem, 1.22rem + 0.72vw, 1.90rem);
  --fs-xl:    clamp(1.80rem, 1.42rem + 1.70vw, 3.00rem);
  --fs-2xl:   clamp(2.40rem, 1.62rem + 3.40vw, 4.80rem);
  --fs-3xl:   clamp(3.00rem, 1.60rem + 6.10vw, 7.50rem);

  --lh-tight: 1.06;
  --lh-snug: 1.28;
  --lh-body: 1.68;

  --tracking-wide: 0.16em;
  --tracking-wider: 0.28em;

  /* ---- Space (8pt-ish, fluid at the top end) --------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: clamp(3rem, 6vw, 5rem);
  --sp-9: clamp(4rem, 10vw, 8rem);
  --sp-10: clamp(6rem, 14vw, 12rem);

  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --measure: 62ch;
  --max-w: 1560px;
  --max-w-text: 720px;

  /* ---- Radius ------------------------------------------------------------
     Everything is square. Kept as tokens rather than deleted so the whole
     site's geometry stays a one-line decision. */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-pill: 0;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms;
  --t-mid: 320ms;
  --t-slow: 680ms;
  --t-glacial: 1400ms;

  --z-bg: 0;
  --z-content: 10;
  --z-critters: 20;
  --z-header: 60;
  --z-lightbox: 100;
  --z-cursor: 120;
}

/* ---- Dark theme (default) ---------------------------------------------- */
:root,
[data-theme="dark"] {
  /* Blue hour. Deep midnight navy, near-monochrome — the palette of a stag
     stood in fog before sunrise. Any warmth on the page comes from the
     photographs themselves, never from the interface. */
  --c-bg:        #0a1020;
  --c-bg-raise:  #0e1628;
  --c-bg-sink:   #060a15;
  --c-surface:   #131c31;
  --c-surface-2: #1a2540;

  --c-text:      #e7ecf6;
  --c-text-soft: #9dabc4;
  --c-text-mute: #66748f;

  --c-line:      rgba(231, 236, 246, 0.10);
  --c-line-str:  rgba(231, 236, 246, 0.22);

  /* Moonlight on mist — a cold highlight, not a warm one */
  --c-accent:      #a9c2e8;
  --c-accent-soft: #d0dcf2;
  --c-accent-deep: #6f8cba;
  /* Deeper water */
  --c-second:      #6d86b4;
  --c-second-deep: #3b4c73;

  --c-glow: rgba(169, 194, 232, 0.12);
  --c-shadow: rgba(0, 0, 0, 0.62);
  --c-scrim: rgba(6, 9, 8, 0.80);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.28);
  --shadow-md: 0 4px 12px rgba(0,0,0,.42), 0 16px 40px rgba(0,0,0,.36);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.50), 0 40px 90px rgba(0,0,0,.46);

  --img-veil: 0.0;
  color-scheme: dark;
}

/* ---- Light theme -------------------------------------------------------- */
[data-theme="light"] {
  /* Fog at daybreak — cold white with a blue cast, never cream. */
  --c-bg:        #eef1f6;
  --c-bg-raise:  #f8fafc;
  --c-bg-sink:   #dfe4ed;
  --c-surface:   #f8fafc;
  --c-surface-2: #e6ebf3;

  --c-text:      #101728;
  --c-text-soft: #44506a;
  --c-text-mute: #74809a;

  --c-line:      rgba(16, 23, 40, 0.12);
  --c-line-str:  rgba(16, 23, 40, 0.26);

  --c-accent:      #3d5c94;
  --c-accent-soft: #5c7cb5;
  --c-accent-deep: #27406b;
  --c-second:      #56688f;
  --c-second-deep: #35425f;

  --c-glow: rgba(61, 92, 148, 0.12);
  --c-shadow: rgba(24, 20, 14, 0.18);
  --c-scrim: rgba(247, 245, 241, 0.86);

  --shadow-sm: 0 1px 2px rgba(30,25,18,.06), 0 2px 8px rgba(30,25,18,.05);
  --shadow-md: 0 4px 12px rgba(30,25,18,.09), 0 16px 40px rgba(30,25,18,.07);
  --shadow-lg: 0 12px 32px rgba(30,25,18,.12), 0 40px 90px rgba(30,25,18,.10);

  color-scheme: light;
}

/* Respect the OS when the visitor has never touched our toggle. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --c-bg: #eef1f6; --c-bg-raise: #f8fafc; --c-bg-sink: #dfe4ed;
    --c-surface: #f8fafc; --c-surface-2: #e6ebf3;
    --c-text: #101728; --c-text-soft: #44506a; --c-text-mute: #74809a;
    --c-line: rgba(16,23,40,.12); --c-line-str: rgba(16,23,40,.26);
    --c-accent: #3d5c94; --c-accent-soft: #5c7cb5; --c-accent-deep: #27406b;
    --c-second: #56688f; --c-second-deep: #35425f;
    --c-glow: rgba(61,92,148,.12);
    --c-scrim: rgba(238,241,246,.86);
    --shadow-sm: 0 1px 2px rgba(30,25,18,.06), 0 2px 8px rgba(30,25,18,.05);
    --shadow-md: 0 4px 12px rgba(30,25,18,.09), 0 16px 40px rgba(30,25,18,.07);
    --shadow-lg: 0 12px 32px rgba(30,25,18,.12), 0 40px 90px rgba(30,25,18,.10);
    color-scheme: light;
  }
}

/* ---- Time-of-day hero tint (set by motion.js, purely decorative) -------- */
[data-daypart="dawn"]  { --tint-a: #f0a978; --tint-b: #6b5b8a; }
[data-daypart="day"]   { --tint-a: #8fb3d6; --tint-b: #7d9b6a; }
[data-daypart="dusk"]  { --tint-a: #e08a4d; --tint-b: #3f4a6b; }
[data-daypart="night"] { --tint-a: #4a6fa0; --tint-b: #16203a; }