/* shared/tokens.css
   Brave Life design tokens. The ONLY place hex values live.
   Source of truth: docs/design.md (keep both in sync).
   Load first on every page: <link rel="stylesheet" href="/shared/tokens.css"> */

:root {
  color-scheme: dark;

  /* ---------- Brand ---------- */
  --brand-orange:       #FF5C00;  /* the one loud color: primary actions, brand moments */
  --brand-orange-hot:   #FF8A3D;  /* hover / highlight only */
  --brand-orange-deep:  #C94800;  /* pressed */
  --brand-purple:       #7B2FBE;  /* atmospheric light only (glows), never text or rings */
  --brand-yellow:       #FFD60A;  /* peak of the ring gradient, never solo */
  --brand-mint:         #5FFCC0;  /* system: focus ring, live/transactional states */

  /* Signature conic ring. Used by .btn--ring and the header glow only. */
  --ring-gradient: conic-gradient(from 0deg,
    #7B2FBE 5%, #C73EA9 17%, #FF2D72 28%, #FF5C00 40%, #FF8A3D 51%,
    #FFB347 63%, #FFD60A 74%, #FF8A3D 85%, #FF5C00 95%, #7B2FBE 100%);

  /* ---------- Stage (warm dark) ---------- */
  --color-bg:            #0A0908;  /* page. Deep night, warm, not void */
  --color-bg-raised:     #100F0D;  /* bands that need to lift off the page */
  --color-surface:       #161412;  /* cards, panels */
  --color-surface-2:     #1E1B18;  /* nested surfaces, inputs */
  --color-border:        rgba(250, 246, 241, 0.10);
  --color-border-strong: rgba(250, 246, 241, 0.18);
  --color-scrim:         rgba(10, 9, 8, 0.72);

  /* ---------- Text ---------- */
  --color-text:          #FAF6F1;  /* warm white */
  --color-text-muted:    #A89886;  /* warm tan, brightened: 7.1:1 on --color-bg */
  --color-text-faint:    #7A6E63;  /* 16px+ only (4.6:1) */
  --color-on-orange:     #1A0A00;  /* text on orange fills (10:1) */
  --color-link:          var(--brand-orange-hot);

  /* ---------- Feedback ---------- */
  --color-success:       #5FFCC0;
  --color-error:         #FF6B6B;
  --color-warning:       #FFB347;

  /* ---------- Type ---------- */
  --font-display: "Kanit", "Manrope", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-display: clamp(2.75rem, 1.9rem + 4vw, 4.5rem);   /* 44 → 72 */
  --text-h1:      clamp(2.25rem, 1.5rem + 3vw, 3.5rem);    /* 36 → 56 */
  --text-h2:      clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); /* 28 → 36 */
  --text-h3:      1.5rem;    /* 24 */
  --text-lg:      1.125rem;  /* 18 */
  --text-md:      1rem;      /* 16 */
  --text-sm:      0.875rem;  /* 14 */
  --text-xs:      0.8125rem; /* 13 */

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-body:  1.55;

  /* ---------- Space (8pt) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;
  --section-y: clamp(64px, 8vw, 96px);

  /* ---------- Shape ---------- */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 9999px;

  /* ---------- Layout ---------- */
  --container:      1264px;
  --container-wide: 1440px;
  --gutter:         16px;
  --header-h:       64px;

  /* ---------- Elevation & light ---------- */
  /* Alpha variants of the primary (orange) and atmosphere (purple) colors. Page CSS uses these,
     never a literal rgba(), so swapping the palette is a one-file change. */
  --primary-a50:   rgba(255, 92, 0, 0.50);
  --primary-a45:   rgba(255, 92, 0, 0.45);
  --primary-a22:   rgba(255, 92, 0, 0.22);
  --primary-a15:   rgba(255, 92, 0, 0.15);
  --primary-a0:    rgba(255, 92, 0, 0);
  --atmos-a50:     rgba(123, 47, 190, 0.50);
  --atmos-a0:      rgba(123, 47, 190, 0);
  --glow-orange:   0 0 0 1px rgba(255, 92, 0, 0.25), 0 8px 32px rgba(255, 92, 0, 0.28);
  --glow-orange-soft: 0 6px 24px rgba(255, 92, 0, 0.30);
  --glow-orange-lg: 0 0 60px rgba(255, 92, 0, 0.35);
  --shadow-raised: 0 12px 40px rgba(0, 0, 0, 0.45);
  --glass-bg:      rgba(250, 246, 241, 0.06);
  --glass-blur:    blur(16px) saturate(1.4);

  /* ---------- Motion ---------- */
  --dur-fast: 150ms;
  --dur:      280ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Z ---------- */
  --z-sticky: 40;
  --z-header: 50;
  --z-nav:    60;
  --z-modal:  100;
  --z-toast:  110;

  /* ---------- Compatibility aliases (legacy names still in page CSS) ---------- */
  --font-brand-display: var(--font-display);
  --font-brand-body:    var(--font-body);
  --color-accent:       var(--brand-orange);
}

@media (min-width: 768px) {
  :root {
    --gutter:   40px;
    --header-h: 80px;
  }
}