/* ============================================================
   SophiaSanta — design tokens
   Art direction: "Noche polar, luz de casa"

   Single source of truth for the visual system. The storefront
   (index.html) and the server-rendered pages (/success, /terms,
   /privacy) all consume this file — change values here, not in
   page styles.

   The page is a journey: it starts outside, at night, in the
   cold (journey palette) and descends into the warm interior of
   a house (interior palette). The warmest, brightest point of
   the whole page is the order form.
   ============================================================ */

:root{
  /* ---- Journey palette: outside, at night ---- */
  --night-deep:#050B1C;   /* near-black night, top of the page   */
  --night:#0E1D3D;        /* deep blue                           */
  --night-lift:#152547;   /* raised surfaces on night            */
  --night-edge:#263760;   /* hairlines on night                  */
  --lamp:#F0B429;         /* lamp gold — the only light source   */
  --lamp-glow:rgba(240,180,41,.16);
  --ember:#E5484D;        /* ember red — RESERVED for the pulse
                             of the incoming call. Nothing else. */
  --snow:#E9EEF6;         /* text on night                       */
  --snow-dim:#A9B4CE;     /* secondary text on night             */

  /* ---- Interior palette: inside, by the fire ---- */
  --fire:#E8894A;         /* fire amber                          */
  --candle:#F3C969;       /* candlelight                         */
  --wood:#2B1810;         /* dark wood                           */
  --wood-lift:#3B2517;    /* raised surfaces on wood             */
  --wood-edge:#5A3B26;    /* hairlines on wood                   */
  --cream:#EFE0CC;        /* warm cream text                     */
  --cream-dim:#CDB69C;    /* secondary text on wood              */

  /* ---- Type ---- */
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Figtree',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --text-hero:clamp(36px,7.4vw,60px);
  --text-h2:clamp(27px,5.2vw,38px);
  --text-body:17px;
  --text-small:14px;
  --text-micro:12px;
  --leading-body:1.6;
  --leading-tight:1.08;
  --tracking-display:-.025em;
  --tracking-mono:.08em;

  /* ---- Space scale ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:36px; --s7:56px; --s8:96px;

  /* ---- Shape & depth ---- */
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:24px;
  --shadow-night:0 30px 80px -32px rgba(0,0,0,.85);
  --shadow-warm:0 24px 64px -28px rgba(20,8,2,.7);
  --measure:640px;
}

/* ---- Base ---- */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--night-deep);
  color:var(--snow);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.mono{
  font-family:var(--font-mono);
  font-size:var(--text-micro);
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
}

/* ---- Film grain ----
   A fine paper/film grain over everything. It is what separates
   "nostalgic" from "flat digital". Subtle: visible if you look. */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:60;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

/* ---- Focus ---- */
:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}