/* ============================================================
   Demos — Design System
   Color + Typography tokens
   ============================================================ */

/* ---------- Fonts ----------
   Primary body face: Atkinson Hyperlegible (Google Fonts — accessible, designed for legibility)
   Display / numerical face: Geist (Vercel — Google Fonts)
   Substitution flags: Lettera Text LL (commercial) is rare; we fall back to Geist.
   CircularXX is also commercial; falls back to Atkinson Hyperlegible.
*/
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Geist:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --purple-stroke: rgb(151, 71, 255); /* placeholder dashed border in figma library */

  /* ---------- PRIMARY (BW + Sand bookends) ---------- */
  --c-white:        #FFFFFF;
  --c-black:        #000000;
  --c-sand-1:       #FBFAF3;   /* light sand background — top of neutral scale */
  --c-sand-6:       #3E3A33;   /* dark warm neutral */
  --c-sand-7:       #1F1D1A;   /* near-black warm — full-flood digital only */

  /* ---------- SAND NEUTRAL SCALE ---------- */
  --c-sand-2:       #F0EEE6;
  --c-sand-3:       #D4D1C3;
  --c-sand-4:       #AEAA9E;
  --c-sand-5:       #7D7971;

  /* ---------- GREY (cool/digital) SCALE ---------- */
  --c-grey-1:       #FAFAFA;
  --c-grey-2:       #E6E6E6;
  --c-grey-3:       #C6C6C6;
  --c-grey-4:       #949494;
  --c-grey-5:       #7A7A7A;
  --c-grey-6:       #4F4F4F;
  --c-grey-7:       #161616;

  /* ---------- SECONDARY ACCENTS ---------- */
  --c-sunflower:    #FDC256;
  --c-sunflower-deep: #BB681F;
  --c-coral:        #F77D8D;
  --c-coral-deep:   #B72751;
  --c-sky:          #82B3D0;
  --c-sky-deep:     #397394;
  --c-lavender:     #A281CF;
  --c-lavender-deep:#3D2B56;

  /* ---------- SEMANTIC / SYSTEM ---------- */
  --c-info:         #1172EB;       /* used for filled blue highlight in components */
  --c-info-bg:      #E7F1FD;       /* tinted light blue surface */

  /* ---------- ROLES ---------- */
  --bg:             var(--c-white);
  --bg-alt:         var(--c-sand-1);
  --bg-inverse:     var(--c-grey-7);          /* #161616 — primary CTA + dark surfaces */
  --surface:        var(--c-white);
  --surface-muted:  #F7F7F7;
  --border:         var(--c-grey-2);          /* #E6E6E6 hairlines */
  --border-strong:  #DDDDDD;
  --divider:        var(--c-grey-6);          /* #4F4F4F on dark covers */

  --fg:             var(--c-grey-7);          /* #161616 primary text */
  --fg-1:           var(--c-grey-7);
  --fg-2:           var(--c-grey-6);          /* #4F4F4F secondary */
  --fg-3:           var(--c-grey-4);          /* #949494 tertiary */
  --fg-disabled:    var(--c-grey-3);
  --fg-on-dark:     var(--c-white);
  --fg-warm:        var(--c-sand-6);          /* #3E3A33 warm body */

  /* CTA tokens */
  --btn-primary-bg:        #141414;
  --btn-primary-bg-hover:  #333333;
  --btn-primary-bg-disabled: #CCCCCC;
  --btn-primary-fg:        #FFFFFF;
  --btn-secondary-fg:      #525252;
  --btn-secondary-fg-disabled: #ADADAD;
  --btn-secondary-bg-hover: rgba(0,0,0,0.12);

  /* ---------- RADII ---------- */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 12px;     /* buttons, cards */
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 100px;
  --r-circle: 9999px;

  /* ---------- SPACING ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- ELEVATION (figma shadow tokens) ---------- */
  --shadow-1: 0 1px 2px rgba(22,22,22,0.03), 0 1px 3px rgba(22,22,22,0.08);
  --shadow-2: 0 4px 8px rgba(22,22,22,0.06), 0 2px 4px rgba(22,22,22,0.04);
  --shadow-3: 0 12px 24px rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.08);
  --shadow-modal: 0 20px 40px rgba(0,0,0,0.20);

  /* ---------- TYPE FAMILIES ---------- */
  --ff-display: "Geist", "Inter", system-ui, sans-serif;     /* numbers, headlines, UI label */
  --ff-body:    "Atkinson Hyperlegible", "Geist", system-ui, sans-serif; /* readable copy */
  --ff-eyebrow: "Geist", monospace;                          /* 10px metadata captions */
}

/* ============================================================
   Semantic typography classes
   Spec from Figma "Type" page — Headline 1..5, Body L/M/S, CTA M/M/S
   ============================================================ */
.t-h1 { font-family: var(--ff-display); font-weight: 500; font-size: 40px; line-height: 1.2; color: rgb(28,23,20); letter-spacing: -0.01em; }
.t-h2 { font-family: var(--ff-display); font-weight: 600; font-size: 32px; line-height: 1.2; color: var(--fg); }
.t-h3 { font-family: var(--ff-display); font-weight: 600; font-size: 24px; line-height: 1.25; color: var(--fg); }
.t-h4 { font-family: var(--ff-display); font-weight: 500; font-size: 20px; line-height: 1.3;  color: var(--fg); }
.t-h5 { font-family: var(--ff-display); font-weight: 500; font-size: 18px; line-height: 1.35; color: var(--fg); }

.t-body-l  { font-family: var(--ff-body); font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--fg); }
.t-body    { font-family: var(--ff-body); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--fg); }
.t-body-s  { font-family: var(--ff-body); font-weight: 400; font-size: 14px; line-height: 1.45; color: var(--fg-2); }

.t-cta-m   { font-family: var(--ff-body); font-weight: 700; font-size: 18px; line-height: 1; color: var(--fg-on-dark); }
.t-cta     { font-family: var(--ff-body); font-weight: 700; font-size: 16px; line-height: 1; color: var(--fg-on-dark); }
.t-cta-s   { font-family: var(--ff-body); font-weight: 700; font-size: 14px; line-height: 1; color: var(--fg-on-dark); }

.t-eyebrow { font-family: var(--ff-eyebrow); font-weight: 400; font-size: 10px; line-height: 14px; letter-spacing: 0.02em; color: var(--fg-2); text-transform: none; }
.t-mono    { font-family: var(--ff-eyebrow); font-size: 10px; }

/* ============================================================
   Base
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }