/* ==========================================================================
   SMART SPITI — DESIGN TOKENS
   Strict black / white / grayscale system. No other UI colours permitted.
   ========================================================================== */

:root{

  /* ---- Core palette -------------------------------------------------- */
  --ink:            #000000;
  --paper:          #FFFFFF;
  --mist:           #F5F5F5;   /* section tint / card fill on white */
  --line:           #EAEAEA;   /* hairline borders on white */
  --line-strong:    #D0D0D0;   /* stronger borders, dividers */
  --graphite:       #888888;   /* muted / tertiary text */
  --slate:          #555555;   /* secondary text on white */
  --charcoal:       #222222;   /* elevated surface on black, card fill on black */

  /* ---- Semantic surfaces ---------------------------------------------- */
  --surface-light:        var(--paper);
  --surface-light-tint:   var(--mist);
  --surface-dark:         var(--ink);
  --surface-dark-tint:    var(--charcoal);

  --text-on-light:        var(--ink);
  --text-on-light-muted:  var(--slate);
  --text-on-light-faint:  var(--graphite);

  --text-on-dark:         var(--paper);
  --text-on-dark-muted:   #B8B8B8;
  --text-on-dark-faint:   #7A7A7A;

  --border-on-light:      var(--line);
  --border-on-light-strong: var(--line-strong);
  --border-on-dark:       rgba(255,255,255,0.14);
  --border-on-dark-strong: rgba(255,255,255,0.28);

  /* ---- Glass material (used sparingly — see SKILL notes) -------------- */
  --glass-fill-light:     rgba(255,255,255,0.62);
  --glass-fill-dark:      rgba(0,0,0,0.55);
  --glass-border-light:   rgba(0,0,0,0.08);
  --glass-border-dark:    rgba(255,255,255,0.14);
  --glass-blur:           18px;

  /* ---- Typography ------------------------------------------------------
     Display / headline family: Plus Jakarta Sans — geometric, a little
     architectural warmth, used only for headings and large numerals.
     Body / UI family: Inter — neutral workhorse for reading and interface
     text, tuned for legibility at small sizes.                          */
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-display:   clamp(2.75rem, 2.1rem + 3vw, 5rem);
  --fs-h1:        clamp(2.25rem, 1.85rem + 1.8vw, 3.5rem);
  --fs-h2:        clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --fs-h3:        clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem);
  --fs-h4:        1.25rem;
  --fs-body-lg:   1.125rem;
  --fs-body:      1rem;
  --fs-small:     0.875rem;
  --fs-eyebrow:   0.8125rem;
  --fs-caption:   0.75rem;

  --lh-tight:     1.08;
  --lh-snug:      1.25;
  --lh-normal:    1.5;
  --lh-relaxed:   1.7;

  --ls-tight:     0;
  --ls-normal:    0;
  --ls-wide:      0.06em;

  /* ---- Spacing scale (8px base) ---------------------------------------- */
  --space-1:  0.5rem;
  --space-2:  0.75rem;
  --space-3:  1rem;
  --space-4:  1.5rem;
  --space-5:  2rem;
  --space-6:  3rem;
  --space-7:  4rem;
  --space-8:  6rem;
  --space-9:  8rem;
  --space-10: 11rem;

  /* ---- Layout ------------------------------------------------------- */
  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 4vw, 4rem);
  --grid-cols: 12;
  --grid-gap: 1.5rem;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Motion (subtle only — Phase 1 has no heavy animation) --------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med:  260ms;

  /* ---- Elevation -------------------------------------------------------
     Shadows are restrained and monochrome — used to lift glass surfaces
     off busy imagery, not as decoration on every card.                  */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.14);
  --shadow-dark-lg: 0 20px 60px rgba(0,0,0,0.55);
}