/* ============================================================
   HiveMind Landing Page — Design Tokens
   Derived from DESIGN.md / Clickt Division Brand System v2.0.
   The brand sheet is law: do not add colors or families here
   that are not defined in DESIGN.md.
   ============================================================ */

:root {
  /* ---- Grounds & neutrals (shared Clickt foundation) ---- */
  --ink:        #0B0F0E;   /* Page ground, hero */
  --ink-2:      #14191A;   /* Raised dark surfaces */
  --ink-3:      #1C2228;   /* Cards/panels on dark (sparingly) */
  --slate:      #5C6470;   /* Muted UI on light surfaces */
  --mist:       #E7EAED;   /* Light dividers on light */
  --cloud:      #F3F4F6;   /* Light artifact surfaces */
  --white:      #FFFFFF;   /* Artifact paper */
  --offwhite:   #EEF1F3;   /* Primary text on dark */
  --line-dark:  rgba(238, 241, 243, 0.16); /* Rules on dark */
  --muted-dark: rgba(238, 241, 243, 0.62); /* Secondary text on dark */

  /* ---- HiveMind family (teal ramp) ---- */
  --hive-900: #07262B;   /* Primary (Abyss) — section grounds, gradients from Ink */
  --hive-700: #0F4A52;   /* Deep accents, hover states, chart depth */
  --hive-500: #1F7A82;   /* Accent (Teal) — CTAs, interactive states, glow, data */
  --hive-300: #5BA89A;   /* Sage — secondary signal, accent text on dark, icons */
  --hive-100: #97C4BD;   /* Tint — subtle highlights, chart series */
  --hive-50:  #DAE9E6;   /* Surface tint on light artifacts */

  /* ---- Master-brand accent — EXACTLY ONE USE on the page ----
     (the Clickt endorsement dot in the footer lockup — HM-435).
     Never use --brand-ember a second time. */
  --brand-ember: #F86B3C;

  /* ---- Typography: families ----
     Two families only (brand-sheet law): Inter + JetBrains Mono. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Typography: fluid type scale ----
     Modular scale, ratio >= 1.25 between adjacent heading maxima.
     Hero display ceiling fixed at 5.5rem per DESIGN.md. */
  --fs-display: clamp(2.5rem, 5vw + 1rem, 5.5rem);       /* hero H1 -> 88px */
  --fs-h1:      clamp(2.25rem, 4vw + 1rem, 3.5rem);      /* 36 -> 56px */
  --fs-h2:      clamp(1.875rem, 3vw + 1rem, 2.75rem);    /* 30 -> 44px */
  --fs-h3:      clamp(1.375rem, 2vw + 0.75rem, 1.75rem); /* 22 -> 28px */
  --fs-h4:      clamp(1.1875rem, 1vw + 0.85rem, 1.375rem);/* 19 -> 22px */
  --fs-body:    clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem); /* 17 -> 19px */
  --fs-sm:      0.9375rem;   /* 15px */
  --fs-eyebrow: 0.8125rem;   /* 13px — the single mono kicker */

  /* ---- Typography: line-heights & tracking ---- */
  --lh-body:    1.6;    /* light-on-dark needs the extra leading */
  --lh-heading: 1.1;
  --tracking-display: -0.04em; /* Inter display: -0.04 to -0.055em, never tighter */
  --tracking-eyebrow: 0.16em;  /* tracked uppercase mono kicker */

  /* ---- Spacing scale ---- */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs:  0.5rem;  /* 8px */
  --space-sm:  0.75rem; /* 12px */
  --space-md:  1rem;    /* 16px */
  --space-lg:  1.5rem;  /* 24px */
  --space-xl:  2rem;    /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4rem;    /* 64px */
  --space-4xl: 6rem;    /* 96px */
  --space-5xl: 8rem;    /* 128px */

  /* Section vertical rhythm & layout widths */
  --section-pad: clamp(4rem, 10vh, 8rem);
  --container:   1200px;
  --prose:       68ch;

  /* ---- Radii ---- */
  --radius-button: 10px;
  --radius-panel:  16px;

  /* ---- Effects ---- */
  --glow-teal: 0 0 24px rgba(31, 122, 130, 0.35); /* primary button hover glow */

  /* ---- Z-index scale ---- */
  --z-nav:   10;
  --z-modal: 40;
  --z-toast: 50;
}