/* =========================================================================
   SpikedSite — tokens.css
   THE design system. Palette + type + scale. Single source of truth.
   Every demo links this first, then base.css, then its own <style> block.
   Each demo overrides --accent (and optionally --paper / data-theme) to get
   its own identity while staying in the family.
   ========================================================================= */

:root{
  /* ---- Claude/Anthropic-inspired core ---- */
  --paper:#F4F3EE;        /* warm page bg (Pampas)       */
  --paper-2:#FAF9F5;      /* lighter cream / raised      */
  --surface:#FFFFFF;      /* cards                       */
  --surface-sunk:#EFEDE6; /* wells                       */
  --ink:#1F1E1D;          /* warm near-black text        */
  --ink-2:#3D3A35;        /* secondary text              */
  --muted:#6B665C;        /* captions / meta             */
  --hairline:#E3E0D8;     /* borders                     */
  --cloud:#B1ADA1;        /* muted dividers (Cloudy)     */

  --clay:#D97757;         /* Claude clay — primary accent */
  --clay-deep:#C15F3C;    /* deeper (Crail) / hover       */
  --clay-press:#A84B2C;   /* pressed                      */
  --tan:#D4A27F;          /* warm tan secondary           */
  --sand:#E7D8C3;         /* soft fill                    */

  /* per-demo accent hook — override this in each demo's <style> */
  --accent:var(--clay);
  --accent-deep:var(--clay-deep);
  --on-accent:#FFFFFF;

  /* ---- type ---- */
  --font-display:"Fraunces","Source Serif 4",Georgia,"Times New Roman",serif;
  --font-body:"Inter","Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Geist Mono","IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  /* fluid scale */
  --step--2:clamp(.72rem,.70rem + .10vw,.80rem);
  --step--1:clamp(.83rem,.80rem + .15vw,.92rem);
  --step-0: clamp(1rem,  .96rem + .20vw,1.125rem);
  --step-1: clamp(1.33rem,1.20rem + .6vw,1.6rem);
  --step-2: clamp(1.78rem,1.50rem + 1.2vw,2.4rem);
  --step-3: clamp(2.37rem,1.90rem + 2.2vw,3.6rem);
  --step-4: clamp(3.16rem,2.30rem + 3.8vw,5.4rem);
  --step-5: clamp(4.20rem,2.80rem + 6.0vw,8rem);

  /* spacing rhythm */
  --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem;    --space-7:3rem;   --space-8:4.5rem;
  --space-9:6.5rem; --space-10:9rem;

  /* radius / shadow / motion */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:32px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(31,30,29,.06),0 1px 1px rgba(31,30,29,.04);
  --shadow-md:0 6px 20px rgba(31,30,29,.10);
  --shadow-lg:0 24px 60px rgba(31,30,29,.16);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --maxw:1200px;
  --maxw-narrow:760px;
}

/* dark family for moody/dark demos and shell dark mode */
[data-theme="dark"]{
  --paper:#1A1915; --paper-2:#211F1A; --surface:#262420; --surface-sunk:#15140F;
  --ink:#F4F3EE; --ink-2:#D8D3C7; --muted:#A9A498; --hairline:#34322B; --cloud:#5A564C;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 1px rgba(0,0,0,.3);
  --shadow-md:0 6px 24px rgba(0,0,0,.45);
  --shadow-lg:0 28px 70px rgba(0,0,0,.55);
}