/* ===========================================================================
   tokens.css — the only place colours, type and spacing are defined.
   Per-shop: change ONLY the values inside the :root block marked PER-SHOP.
   Everything else is the same on every PRYSM preview site.
   =========================================================================== */

:root {
  /* ---- PER-SHOP: set these three from shops/<slug>/shop.json ------------ */
  --brand:        #212a34;   /* their main brand colour, exact hex          */
  --brand-ink:    #212a34;   /* 14.53:1 on white, so it needs no darkening  */
  --brand-contrast:#ffffff;  /* white on brand is 14.53:1                    */
  --brand-on-dark:#65809d;   /* their colour lightened to 4.62:1 on #0f1114. */
                             /* Small text only, never a large fill.         */

  /* ---- Theme: light is the default. See DESIGN.md §3. ------------------- */
  --ink:          #14161a;   /* body text                                    */
  --ink-soft:     #555d68;   /* secondary text                               */
  --ink-faint:    #8b939e;   /* captions, meta                               */
  --line:         #e3e6ea;   /* hairlines, borders                           */
  --surface:      #ffffff;   /* page background                              */
  --surface-alt:  #f6f7f9;   /* alternating section background               */
  --dark:         #0f1114;   /* dark sections (hero, gallery)                */
  --dark-alt:     #191c21;   /* card on a dark section                       */
  --on-dark:      #f4f5f7;   /* text on a dark section                       */
  --on-dark-soft: #a8b0ba;

  /* ---- Type ------------------------------------------------------------ */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);  /* swap for ONE loaded display face, max 100KB */

  --step--1: 0.875rem;                              /* 14px  small print     */
  --step-0:  1.0625rem;                             /* 17px  body            */
  --step-1:  clamp(1.125rem, 1.02rem + 0.5vw,  1.3125rem);   /* lead para    */
  --step-2:  clamp(1.375rem, 1.2rem  + 0.85vw, 1.75rem);     /* h3           */
  --step-3:  clamp(1.75rem,  1.45rem + 1.5vw,  2.5rem);      /* h2           */
  --step-4:  clamp(2.125rem, 1.5rem  + 3.1vw,  4.25rem);     /* h1  34→68px  */

  /* ---- Spacing scale (DESIGN.md §5) ------------------------------------ */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --gutter: 16px;
  --wrap: 1140px;
  --radius: 12px;
  --radius-pill: 9999px;

  --shadow:    0 1px 2px rgba(15,17,20,.05), 0 4px 16px rgba(15,17,20,.06);
  --shadow-up: 0 -2px 12px rgba(15,17,20,.12);

  /* ---- Motion (DESIGN.md §1) — these are the ONLY durations allowed ----- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 150ms;   /* hover, focus, colour                                 */
  --t-reveal: 400ms; /* section fade-and-rise on scroll                      */
}

@media (min-width: 640px) { :root { --gutter: 24px; } }

/* ---- Dark theme variant -------------------------------------------------
   Add class="theme-dark" to <html> ONLY when the shop's photos are strong,
   high-contrast close-ups. See DESIGN.md §3 — dark + mediocre photos is the
   generic template trap. This is a deliberate choice, never a default.      */
html.theme-dark {
  --ink: #f4f5f7;  --ink-soft: #a8b0ba;  --ink-faint: #79818c;
  --line: #262a30; --surface: #0f1114;   --surface-alt: #161a1f;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
}