/* ─────────────────────────────────────────────────────────────────────────
 * shopEyes Design System — tokens.css
 *
 * Single source of truth for color, type, spacing, radius, elevation, motion.
 * Import this file from any new page:
 *
 *   <link rel="stylesheet" href="styleguide/tokens.css" />
 *
 * Then reference tokens via var(--name) inside the page's own <style>.
 *
 * Brand identity (three sentences):
 *   1. Darkness as theatre — Void #000 → Deep Teal #02090a → Dark Forest
 *      #061a1c → Forest #102620 create a nocturnal keynote atmosphere.
 *   2. NeueHaasGrotesk variable at 88px with featherweight (330–400, ss03)
 *      + Inter Variable body — combined they feel etched in light.
 *   3. Neon Green #36f4a4 is the singular high-energy accent — focus rings
 *      and critical highlight only, never a surface fill.
 *
 * Last sync: 2026-06-10
 * Authoritative source: docs/TOKENS.md
 * ─────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Surface ────────────────────────────────────────────────────── */
  --bg:           #000000;             /* void — true black root */
  --surface:      #02090a;             /* deep teal — card surfaces */
  --surface-warm: #061a1c;             /* dark forest — section backgrounds */
  --surface-hi:   #102620;             /* forest — elevated surfaces */

  /* ─── Foreground ─────────────────────────────────────────────────── */
  --fg:   #ffffff;                     /* white — only text color on dark */
  --fg-2: #ffffff;                     /* alias of --fg; no secondary split */
  --muted: #a1a1aa;                    /* zinc — secondary text, descriptions */
  --meta:  #71717a;                    /* zinc-50 — timestamps, tertiary info */

  /* ─── Border ─────────────────────────────────────────────────────── */
  --border:      #1e2c31;              /* dark card border — hairline */
  --border-soft: #3f3f46;              /* subtle dividers, disabled */

  /* ─── Accent ─────────────────────────────────────────────────────── */
  /* Neon Green is precious — focus rings and critical accents only.
     It never fills large surfaces. --accent-on is black for contrast. */
  --accent:        #36f4a4;            /* neon green */
  --accent-on:     #000000;
  --accent-hover:  #2de097;

  /* ─── Semantic ───────────────────────────────────────────────────── */
  --success: #36f4a4;                  /* neon green — success state */
  --warn:    #eab308;
  --danger:  #f87171;

  /* ─── Typography ─────────────────────────────────────────────────── */
  --font-display: "NeueHaasGrotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter Variable", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Type scale — landing-page baseline. */
  --text-xs:   12px;                   /* caption / overline / label */
  --text-sm:   14px;                   /* metadata / small CTA */
  --text-base: 16px;                   /* body — primary reading size */
  --text-md:   18px;                   /* body emphasis */
  --text-lg:   20px;                   /* lead paragraph */
  --text-xl:   28px;                   /* h4 — card heading */
  --text-2xl:  40px;                   /* h3 — feature title */
  --text-3xl:  56px;                   /* h2 — section title */
  --text-4xl:  88px;                   /* h1 — cinematic hero */

  /* Leading + tracking.
     --leading-tight:1.02 at h1; --leading-body:1.55 for body. */
  --leading-body:     1.55;
  --leading-tight:    1.02;
  --tracking-display: -0.01em;

  /* ─── Spacing ────────────────────────────────────────────────────── */
  /* 8px base unit (--space-2 = 8). */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  28px;
  --space-8:  36px;
  --space-10: 48px;
  --space-12: 64px;
  --space-16: 96px;

  /* Section rhythm — theatrical pacing: vast dark expanse between blocks. */
  --section-y-desktop: 120px;
  --section-y-tablet:  80px;
  --section-y-phone:   56px;

  /* ─── Radius ─────────────────────────────────────────────────────── */
  --radius-sm:   9999px;               /* full pill — all CTA buttons */
  --radius-md:   8px;                  /* standard cards, inputs */
  --radius-lg:   12px;                 /* featured cards */
  --radius-xl:   20px;                 /* top-rounded cards, modal headers */

  /* ─── Elevation ──────────────────────────────────────────────────── */
  /* Multi-layer shadow: 1px ring + progressive blur + inset white glow.
     On dark surfaces these read as ambient occlusion, not lift. */
  --elev-raised:
    rgba(0, 0, 0, 0.4) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.3) 0px 2px 4px,
    rgba(0, 0, 0, 0.2) 0px 8px 24px,
    rgba(255, 255, 255, 0.03) 0px 1px 0px inset;

  --elev-result:
    rgba(0, 0, 0, 0.5) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.4) 0px 12px 40px,
    rgba(54, 244, 164, 0.08) 0px 0px 80px inset;

  /* ─── Focus ──────────────────────────────────────────────────────── */
  /* Neon Green focus ring — brand signature, non-negotiable. */
  --focus-ring: 0 0 0 2px #36f4a4;

  /* ─── Motion ─────────────────────────────────────────────────────── */
  --motion-fast:   150ms;
  --motion-base:   220ms;
  --motion-slow:   400ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ─── Layout ─────────────────────────────────────────────────────── */
  --container-max:            1280px;
  --container-gutter-desktop: 64px;
  --container-gutter-tablet:  32px;
  --container-gutter-phone:   20px;

  /* ─── Homepage navigation bridge ───────────────────────────────── */
  /* The landing page keeps a custom nav shell. These bridge tokens let it
     stay readable in both themes without reusing body text colors directly. */
  --home-nav-bg: rgba(0, 0, 0, 0.76);
  --home-nav-border: rgba(30, 44, 49, 0.9);
  --home-nav-fg: #ffffff;
  --home-nav-muted: #a1a1aa;
  --home-nav-panel-bg: rgba(2, 9, 10, 0.96);
  --home-nav-panel-hover: rgba(54, 244, 164, 0.08);
  --home-nav-toggle-bg: transparent;
  --home-nav-toggle-hover: rgba(255, 255, 255, 0.08);
  --home-nav-button-bg: #ffffff;
  --home-nav-button-fg: #000000;
}