/* Apex Protocol v90 Design Tokens - Phase A
 * Date : 2026-05-20
 * Spec source : projects/apex-protocol/research/design-references/v90-design-system-spec.md
 * Visual reference : v90-preview-v2.html (champagne premium dark)
 *
 * Strategy : v90 NEW tokens defined here + mobile.css legacy tokens alias to these.
 * This file loaded FIRST in head, then mobile.css applies aliases.
 *
 * Anti-AI tells :
 * - NO pure black (#0E1014 warm undertone)
 * - NO pure white (#F5F5F0 off-white)
 * - Asymmetric grids (1.6fr / 1fr / 1fr)
 * - Champagne #D4B886 (warmer than gold)
 * - Noise grain texture 0.015 opacity overlay
 * - Inter Tight variable font (Italic 900 hero)
 * - JetBrains Mono for data labels + version
 */

/* ============================================================
   GOOGLE FONTS - Inter Tight + JetBrains Mono
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,200;0,400;0,500;0,600;0,700;0,900;1,200;1,400;1,700;1,900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* v96 2026-05-21 : declare dark color scheme to opt OUT of Chrome Android Force Dark
     auto-invert. Without this, Chrome inverts our already-dark bubbles + cards = invisible.
     Side benefits : form inputs / scrollbar / text selection / date pickers native dark. */
  color-scheme: dark;

  /* ============================================================
     BACKGROUNDS - warm undertone, anti-pure-black
     ============================================================ */
  --bg-primary: #0E1014;
  --bg-secondary: #161922;
  --bg-tertiary: #1F2430;
  --bg-elevated: #262C3A;
  --bg-overlay: rgba(0, 0, 0, 0.72);

  /* ============================================================
     TEXT - off-white, not pure
     ============================================================ */
  --text-primary: #F5F5F0;
  --text-secondary: #B5B8C0;
  --text-tertiary: #6A6F7A;
  --text-disabled: #383D47;

  /* ============================================================
     SEMANTIC - data encoding strict (NOT decoration)
     Green = good / Yellow = moderate / Red = alert
     ============================================================ */
  --green-strong: #00C26A;
  --green-bright: #00E68A;
  --green-soft: rgba(0, 194, 106, 0.12);

  --yellow-strong: #F0A800;
  --yellow-soft: rgba(240, 168, 0, 0.12);

  --red-strong: #E63354;
  --red-soft: rgba(230, 51, 84, 0.12);

  --blue-info: #4D9DFF;
  --blue-soft: rgba(77, 157, 255, 0.12);

  /* Elite tier - 4th signature color (PR badges, achievements) */
  --purple-elite: #B266F5;
  --purple-soft: rgba(178, 102, 245, 0.15);

  /* ============================================================
     CHAMPAGNE BRAND - warmer than gold (Apex signature)
     ============================================================ */
  --champagne: #D4B886;
  --champagne-bright: #E8C896;
  --champagne-deep: #9C8359;
  --champagne-soft: rgba(212, 184, 134, 0.12);
  --champagne-gradient: linear-gradient(135deg, #D4B886 0%, #E8C896 50%, #C9A467 100%);
  --champagne-radial: radial-gradient(circle at 30% 30%, #E8C896, #D4B886 50%, #9C8359);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: 'Inter Tight', 'SF Pro Display', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter Tight', 'SF Pro Text', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Scale hierarchy (WHOOP-inspired) */
  --text-hero: 72px;
  --text-display: 48px;
  --text-headline: 32px;
  --text-title: 22px;
  --text-body: 16px;
  --text-caption: 13px;
  --text-micro: 11px;

  /* Weight scale */
  --font-weight-thin: 200;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Letter spacing */
  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-uppercase: 0.15em;

  /* ============================================================
     SPACING - 8px grid
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ============================================================
     RADIUS
     ============================================================ */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* ============================================================
     ELEVATION
     ============================================================ */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 16px rgba(0,0,0,0.5);
  --shadow-elevated: 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 32px rgba(0,0,0,0.6);
  --shadow-fab: 0 8px 24px rgba(212, 184, 134, 0.35), 0 2px 4px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.6);
  --shadow-xl: 0 16px 32px rgba(0,0,0,0.7);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
}

/* ============================================================
   NOISE GRAIN TEXTURE OVERLAY - anti-AI signature
   ============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ============================================================
   REDUCED MOTION RESPECT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}