/* ============================================================
   TOKENS — the single source of truth for the visual system.
   Change a value here and it updates everywhere.

   BRAND (from the couple's invitation reference): grey paper, one strong
   colour used for everything (now RGB 255,0,200), marker lettering,
   hand-drawn doodles. Change --ink and --cobalt together to re-colour.
   ============================================================ */

:root {
  color-scheme: only light;   /* day mode on every device, whatever its own dark-mode setting */
  /* ---------- COLOUR ---------- */
  --paper: #ece9e2;        /* main background: light warm paper */
  --ink: #ff00c8;         /* all text: RGB 255, 0, 200 (the couple's pick) */
  --cobalt: #ff00c8;      /* lettering, doodles, route (name kept from the first palette) */
  --night: #0b1233;        /* the ink-dark end of the day (deep navy) */
  --cobalt-light: #ff7ee0; /* the same pink as it appears on the night background */

  --accent: var(--cobalt); /* change this one line to re-colour all graphics */

  /* Day → night atmosphere. Sections declare a tone; the page eases between them. */
  --tone-day: #ece9e2;
  --tone-late: #e7e4dc;
  --tone-dusk: #ddd9d0;
  --tone-night: #0b1233;

  --bg: var(--tone-day);   /* current page background (driven by data-tone) */
  --fg: var(--ink);        /* current text colour */
  --fg-soft: #ff00c8;      /* every piece of text is the one pink */
  --line: rgba(255, 0, 200, 0.45);      /* hairlines */
  --line-soft: rgba(255, 0, 200, 0.22);
  --block: rgba(255, 0, 200, 0.07);    /* map figure-ground fill */

  /* Photography. For black-and-white like the reference invitation, set to grayscale(1) */
  --photo-filter: none;
  --radius-photo: 0;

  /* ---------- TYPOGRAPHY ----------
     Fonts load from Google Fonts in index.html. Big marker lettering (names,
     date, times, venues) is hand-drawn SVG made by tools/make-lettering.py. */
  --font-hand: "Edu SA Hand", "Bradley Hand", "Segoe Print", "Chalkboard SE", "Comic Sans MS", cursive;
  --font-sans: var(--font-hand); /* one typeface everywhere: Edu SA Hand */
  --font-mono: var(--font-hand);

  --label-tracking: 0.1em;

  /* Fluid type scale (mobile-first; overridden at 900px+ below) */
  --step-label: 0.75rem;                              /* 12px */
  --step-body: 1.0625rem;                             /* 17px */
  --step-body-s: 0.9375rem;                           /* 15px */
  --step-hand: clamp(1.0625rem, 4.5vw, 1.5rem);         /* handwritten lines */
  --step-lead: clamp(1.625rem, 7.2vw, 3.25rem);       /* invitation, handwritten */
  --odo-w: clamp(2.9rem, 15vw, 6.5rem);               /* width of one counter digit */

  /* ---------- SPACING (8px base) ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 9rem;

  /* Section rhythm: deliberately uneven */
  --rhythm-s: clamp(2rem, 8vw, 4rem);
  --rhythm-m: clamp(3rem, 12vw, 6rem);
  --rhythm-l: clamp(4.5rem, 18vw, 9rem);

  /* ---------- LAYOUT ---------- */
  --nav-h: calc(3rem + env(safe-area-inset-top));
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --col-gap: clamp(1rem, 2vw, 1.75rem);
  --wrap-max: 96rem;
  --hairline: 1px;

  /* ---------- MOTION ----------
     Three levels: micro (feedback), editorial (composition), scroll (narrative). */
  --dur-micro: 200ms;
  --dur-editorial: 800ms;
  --dur-slow: 1400ms;
  --dur-tone: 1600ms;      /* day → night easing */
  --hero-frame: 1.2s;      /* how long each stop-motion photo is held */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- LAYERS ---------- */
  --z-map-label: 2;
  --z-nav: 50;
  --z-index: 100;

  /* ---------- JOURNEY MAP SIZE ----------
     The map is drawn on a 390 × 1420 grid. Its on-screen width is the screen
     width on phones, and a fixed column on desktop. Height follows from that. */
  --map-w: min(100vw, 44rem);
  --map-h: calc(var(--map-w) * 1420 / 390);
}

/* Day → night: sections set data-tone; main.js sets it on <html> */
html[data-tone="late"] { --bg: var(--tone-late); }
html[data-tone="dusk"] { --bg: var(--tone-dusk); }
html[data-tone="night"] {
  --bg: var(--tone-night);
  --fg: var(--ink);
  --fg-soft: var(--ink);
  --accent: var(--cobalt);
  --line: rgba(216, 215, 211, 0.3);
  --line-soft: rgba(216, 215, 211, 0.15);
  --block: rgba(216, 215, 211, 0.06);
}

/* NIGHT MODE: switched by the sun / moon button in the top bar (html[data-theme="night"]).
   Same pink, same hand, same paper, just a deep plum-black page. */
html[data-theme="night"] {
  --paper: #1c1220;
  --tone-day: #1c1220;
  --tone-late: #180f1c;
  --tone-dusk: #140b17;
  --bg: var(--tone-day);
  --line: rgba(255, 0, 200, 0.55);
  --line-soft: rgba(255, 0, 200, 0.28);
  --block: rgba(255, 0, 200, 0.12);
  color-scheme: dark;
}
html[data-theme="night"][data-tone="late"] { --bg: var(--tone-late); }
html[data-theme="night"][data-tone="dusk"] { --bg: var(--tone-dusk); }

/* Desktop reinterpretation of the scale */
@media (min-width: 900px) {
  :root {
    --step-body: 1.125rem;
    --step-hand: clamp(1.25rem, 1.7vw, 1.75rem);
    --step-lead: clamp(2.25rem, 3.8vw, 4.25rem);
    --odo-w: clamp(3.5rem, 6vw, 6.5rem);
  }
}