/* ============================================================
   GLANZ — design tokens. Single source of truth.
   Reskin for another studio = edit this file + i18n/*.json + img/.
   ============================================================ */
:root{
  /* ---- palette ---------------------------------------- */
  --bone:#F3EFE9;          /* page */
  --bone-deep:#E7E1D8;     /* alternating bands */
  --nude:#D8C3B4;          /* panels */
  --stone:#8A7A6D;         /* secondary text */
  --ink:#100D0C;           /* primary text */
  --ink-soft:#2A2320;
  --on-dark:#F3EFE9;

  /* The accent is LIVE — the shade library rewrites it at runtime.
     This is only the opening state (Oxblood No.14). */
  --accent:#6E1B2A;
  --accent-ink:#FFFFFF;    /* readable text ON --accent */
  --accent-text:#6E1B2A;   /* the accent darkened to clear 4.5:1 on --bone;
                              shades.js recomputes it per lacquer */

  --line:color-mix(in srgb, var(--ink) 14%, transparent);
  --line-strong:color-mix(in srgb, var(--ink) 28%, transparent);

  /* ---- type ------------------------------------------- */
  --display:'Instrument Serif', 'Times New Roman', Georgia, serif;
  --ui:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* fluid scale, 390px -> 1600px */
  --t-xs:clamp(.69rem, .66rem + .12vw, .76rem);
  --t-sm:clamp(.81rem, .78rem + .15vw, .9rem);
  --t-base:clamp(.97rem, .93rem + .2vw, 1.06rem);
  --t-md:clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
  --t-lg:clamp(1.6rem, 1.25rem + 1.6vw, 2.6rem);
  --t-xl:clamp(2.3rem, 1.4rem + 4vw, 4.6rem);
  --t-2xl:clamp(3.2rem, 1.2rem + 8.6vw, 9rem);
  /* the hero headline must answer to viewport HEIGHT too, or on a short
     wide window it pushes the sub-line and buttons off the screen */
  --t-3xl:clamp(3.2rem, min(.5rem + 12.5vw, 17vh), 12rem);

  --tracking-wide:.18em;
  --tracking-ui:.04em;
  --leading-tight:.94;
  --leading-body:1.62;

  /* ---- space (base 8) --------------------------------- */
  --s1:.5rem;  --s2:1rem;   --s3:1.5rem; --s4:2rem;
  --s5:2.5rem; --s6:3rem;   --s8:4rem;   --s10:5rem;
  --s12:6rem;  --s16:8rem;  --s20:10rem; --s24:12rem;
  --section:clamp(4.5rem, 3rem + 8vw, 11rem);
  --gutter:clamp(1.25rem, .6rem + 2.6vw, 4rem);
  --maxw:82rem;

  /* ---- shape & depth ---------------------------------- */
  --r-sm:3px; --r-md:10px; --r-lg:22px; --r-pill:999px;
  --shadow-soft:0 24px 60px -34px rgba(16,13,12,.34);
  --shadow-lift:0 40px 90px -40px rgba(16,13,12,.46);

  /* ---- motion ----------------------------------------- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur-fast:.28s; --dur:.55s; --dur-slow:.9s;

  --z-canvas:0; --z-content:10; --z-rail:20; --z-nav:30;
  --z-cursor:60; --z-overlay:80;
}

/* Motion is a garnish, never the meal. Everything must read without it. */
@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:.001s; --dur:.001s; --dur-slow:.001s; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}