/* ============================================================
   Sphere: "Ground Truth" event landing
   Design tokens (extracted from Figma: Foundations page)
   Source of truth for color + typography. Do not hardcode
   raw values in components: reference these variables.
   ============================================================ */

:root {
  /* --------------------------------------------------------
     COLOR: Primary
     -------------------------------------------------------- */
  --color-mint:  #dcf8da;
  --color-volt:  #99ff4b;
  --color-night: #0d0e0d;
  --color-white: #ffffff;

  /* Primary gradient (official, from brand guidelines) */
  --gradient-primary: linear-gradient(180deg, #6ae654 0%, #99ff4b 44%, #ddfbd3 77%, #48b45f 100%);

  /* --------------------------------------------------------
     COLOR: Stone (warm light neutrals)
     -------------------------------------------------------- */
  --color-stone-20:  #f9f8f3;
  --color-stone-40:  #ecebe7;
  --color-stone-60:  #dfddcf;
  --color-stone-80:  #d4d3c7;
  --color-stone-100: #b4b4a8;

  /* --------------------------------------------------------
     COLOR: Midnight (cool dark neutrals)
     -------------------------------------------------------- */
  --color-midnight-20:  #8a8f8a;
  --color-midnight-40:  #5e625e;
  --color-midnight-60:  #414441;
  --color-midnight-80:  #2e312e;
  --color-midnight-100: #1f231f;

  /* --------------------------------------------------------
     COLOR: Secondary (accents)
     -------------------------------------------------------- */
  --color-slate:  #074752;
  --color-ocean:  #c5f3f1;
  --color-forest: #3a4b09;
  --color-sage:   #deedda;
  --color-plum:   #561939;
  --color-blush:  #ffddda;

  /* --------------------------------------------------------
     SEMANTIC COLOR (map raw -> role; use these in components)
     -------------------------------------------------------- */
  --bg-page:        var(--color-stone-20);
  --bg-inverse:     var(--color-night);
  --bg-accent:      var(--color-forest);
  --surface:        var(--color-white);
  --surface-sunken: var(--color-stone-40);

  --text-primary:   var(--color-night);
  --text-secondary: var(--color-midnight-60);
  --text-muted:     var(--color-midnight-40);
  --text-inverse:   var(--color-stone-20);
  --text-on-accent: var(--color-mint);

  --accent:         var(--color-volt);
  --border-subtle:  var(--color-stone-60);
  --border-inverse: var(--color-midnight-80);

  /* --------------------------------------------------------
     TYPOGRAPHY: families
     Custom fonts: add @font-face in fonts.css. Fallbacks below.
     -------------------------------------------------------- */
  --font-primary:   "Cambon", Georgia, "Times New Roman", serif;      /* displays + headings */
  --font-secondary: "CoFo Gothic", "Helvetica Neue", Arial, sans-serif; /* body + UI */

  /* Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  /* --------------------------------------------------------
     TYPOGRAPHY: type scale
     1:1 with the Figma "Typography" variable collection.
     --fs-* = exact desktop px. The .t-* utilities in base.css
     make the big headings fluid, capping at these values.
     Heading weights: H2 = Regular, all others = Light.
     -------------------------------------------------------- */
  /* Display: Cambon Light (closing CTA) */
  --fs-display-md: 68px;  --lh-display-md: 1.08;  --tr-display-md: -0.018em;

  /* Heading: Cambon */
  --fs-h1: 60px;  --lh-h1: 1.08;  --tr-h1: -0.018em;  /* Light   */
  --fs-h2: 50px;  --lh-h2: 1.08;  --tr-h2: -0.018em;  /* Regular */
  --fs-h3: 40px;  --lh-h3: 1.08;  --tr-h3: -0.018em;  /* Light   */
  --fs-h4: 28px;  --lh-h4: 1.20;  --tr-h4: -0.02em;   /* Light   */
  --fs-h5: 24px;  --lh-h5: 1.30;  --tr-h5: -0.02em;   /* Light   */
  --fs-h6: 20px;  --lh-h6: 1.20;  --tr-h6: -0.02em;   /* Light   */

  /* Body: CoFo Gothic, Regular */
  --fs-body-lg: 20px;  --lh-body-lg: 1.30;
  --fs-body-md: 18px;  --lh-body-md: 1.40;
  --fs-body:    16px;  --lh-body:    1.40;

  /* Button: CoFo Gothic Regular, +2% tracking */
  --fs-button: 16px;  --lh-button: 1.10;  --tr-button: 0.02em;

  /* --------------------------------------------------------
     SPACING: 4px base scale (not yet defined in Figma;
     provisional, adjust when spacing tokens land)
     -------------------------------------------------------- */
  --space-2:   0.125rem;  /*  2px */
  --space-4:   0.25rem;   /*  4px */
  --space-8:   0.5rem;    /*  8px */
  --space-12:  0.75rem;   /* 12px */
  --space-16:  1rem;      /* 16px */
  --space-24:  1.5rem;    /* 24px */
  --space-32:  2rem;      /* 32px */
  --space-48:  3rem;      /* 48px */
  --space-64:  4rem;      /* 64px */
  --space-96:  6rem;      /* 96px */
  --space-128: 8rem;      /* 128px */

  /* --------------------------------------------------------
     LAYOUT / RADII / MOTION
     -------------------------------------------------------- */
  --container-max: 1440px;
  /* Content gutter = 160px at 1440 (11.11vw), shrinks on small screens */
  --container-pad: clamp(1.25rem, 11.11vw, 160px);
  /* Nav gutter = 64px at 1440 (4.44vw), the bar sits wider than content */
  --nav-pad: clamp(1.25rem, 4.44vw, 64px);

  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:      180ms;
  --dur-base:      320ms;
  --dur-slow:      600ms;
}