/* Public Oculus — design tokens v1.1 (2026.07)
 * Drop-in CSS custom properties. Import once, at the root of your stylesheet.
 *
 *   <link rel="stylesheet" href="/brand/tokens.css" />
 *
 * Locked type pairing: Geist · Instrument Serif · Geist Mono.
 * Dark canvas only. There is no light theme in v1.
 */

/* Google Fonts @import removed for this deploy — zero external requests.
 * The three families are self-hosted; see the @font-face rules in styles.css. */

:root {
  /* ─── Brand signal ─────────────────────────────────── */
  --po-green:        #3DDC97;   /* earnings — money/points ONLY */
  --po-green-dim:    #2BA877;
  --po-green-glow:   rgba(61, 220, 151, 0.18);

  /* ─── Surfaces ─────────────────────────────────────── */
  --bg-canvas:       #0A0F1C;
  --bg-surface:      #121828;
  --bg-surface-2:    #1A2236;
  --bg-surface-3:    #232C44;
  --bg-tab-bar:      rgba(10, 15, 28, 0.70);
  --bg-scrim:        rgba(0, 0, 0, 0.60);

  /* ─── Foreground ───────────────────────────────────── */
  --fg-primary:      #F2F4F8;
  --fg-secondary:    #A8B0C2;
  --fg-tertiary:     #6B7591;
  --fg-disabled:     #3D465E;
  --fg-on-green:     #06281C;

  /* ─── Borders ──────────────────────────────────────── */
  --border-subtle:   rgba(255, 255, 255, 0.06);
  --border-default:  rgba(255, 255, 255, 0.10);
  --border-strong:   rgba(255, 255, 255, 0.16);
  --border-focus:    var(--po-green);

  /* ─── Semantic ─────────────────────────────────────── */
  --color-success:   var(--po-green);
  --color-warning:   #F5B14C;
  --color-danger:    #F26B6B;
  --color-info:      #6BA0F2;

  /* ─── Sensor accents (chips only — never fills) ────── */
  --sensor-gps:      #6BA0F2;
  --sensor-ble:      #8B7CFF;
  --sensor-wifi:     #4ECFE0;
  --sensor-motion:   #F5B14C;
  --sensor-baro:     #C68BE6;
  --sensor-light:    #F2D26B;
  --sensor-network:  #80E0B5;
  --sensor-audio:    #F26B6B;
  --sensor-nfc:      #B0BAD3;

  /* ─── Type — LOCKED PAIRING A ──────────────────────── */
  --font-ui:         'Geist', system-ui, sans-serif;
  --font-display:    'Instrument Serif', Georgia, serif;       /* marketing only */
  --font-num:        'Geist Mono', ui-monospace, monospace;    /* all numbers */
  --font-sans:       var(--font-ui);
  --font-mono:       var(--font-num);
  --num-feat:        "tnum" 1, "lnum" 1;

  /* Product UI scale */
  --fs-display:   34px;  --lh-display:   40px;  --tr-display:   -0.02em;
  --fs-h1:        28px;  --lh-h1:        34px;  --tr-h1:        -0.015em;
  --fs-h2:        22px;  --lh-h2:        28px;  --tr-h2:        -0.01em;
  --fs-h3:        18px;  --lh-h3:        24px;  --tr-h3:        -0.005em;
  --fs-body:      15px;  --lh-body:      22px;
  --fs-body-sm:   13px;  --lh-body-sm:   18px;
  --fs-caption:   12px;  --lh-caption:   16px;  --tr-caption:    0.01em;
  --fs-overline:  11px;  --lh-overline:  14px;  --tr-overline:   0.08em;

  /* Marketing scale */
  --fs-hero:      96px;  --lh-hero:      0.95;
  --fs-h1-mkt:    56px;  --lh-h1-mkt:    1.05;
  --fs-h2-mkt:    36px;  --lh-h2-mkt:    1.15;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ─── Spacing (4-pt 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;

  /* ─── Radius ───────────────────────────────────────── */
  --r-input:  8px;
  --r-button: 12px;
  --r-card:   16px;
  --r-sheet:  24px;
  --r-pill:   999px;

  /* ─── Elevation ────────────────────────────────────── */
  --shadow-inset:        inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-inset-deep:   inset 0 2px 6px rgba(0,0,0,0.35);
  --shadow-glow-green:   0 0 0 1px rgba(61,220,151,0.30), 0 0 24px rgba(61,220,151,0.12);

  /* ─── Motion ───────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   240ms;
  --dur-pulse:  2000ms;
}

/* Body bindings */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
code, .num, .mono {
  font-family: var(--font-num);
  font-feature-settings: var(--num-feat);
}
.display-mkt {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}