/*
  YouMakemWePayYou — Design Tokens
  ---------------------------------
  Signature concept: the "Split Ring" — a ring divided 65/35 between the
  brand violet and the payout mint, a literal encoding of the creator
  revenue share. It appears in the logo mark, the loading indicator, and
  empty states. Everything else stays quiet so that mark stays memorable.
*/

:root {
  /* Tells the browser which palette to use for UI it renders itself rather
     than from author CSS — most visibly, the native popup a <select>
     opens (see .input in components.css: any select using that class only
     has its own CLOSED box themed by author CSS; the OPEN option list is
     drawn by the browser/OS, and without this it defaults to a light
     popup with light `color: inherit` text on top of it — unreadable.
     Found 2026-08-10 via a live bug report on the Studio Upload page's
     Visibility <select>. Flipped alongside --color-* below by theme.js's
     [data-theme] toggle so the fix tracks light/dark mode correctly
     instead of only fixing it for the dark (default) theme. */
  color-scheme: dark;

  /* ---- Color: dark (default) ---- */
  --color-void: #0a0a12;
  --color-void-raised: #101018;
  --color-surface: rgba(255, 255, 255, 0.055);
  --color-surface-strong: rgba(255, 255, 255, 0.09);
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-ink: #f3f2f8;
  --color-muted: #9c9ab0;
  /* MPS Phase 9 (Accessibility) — was #6b6980 (3.72:1 on --color-void),
     failing WCAG AA's 4.5:1 minimum for normal text despite being used as
     real copy sitewide (field hints on every form, @usernames, inactive
     tab labels, timestamps — see components.css's .field-hint and
     nav.css's .tabbar/.notif-item-time for the highest-traffic uses).
     #85839a clears 4.5:1 (~5.36:1) while staying the same muted-lavender
     hue family as the original. */
  --color-faint: #85839a;

  --color-signal: #7c5cfc;       /* brand / interactive violet */
  --color-signal-strong: #9a80ff;
  --color-payout: #21d19f;       /* creator revenue / positive mint */
  --color-payout-strong: #3ee8b6;
  --color-edge: #ff4d6d;         /* live / destructive / recording */
  --color-warn: #ffb454;

  --gradient-signal: linear-gradient(135deg, #7c5cfc 0%, #5a3ff0 100%);
  --gradient-payout: linear-gradient(135deg, #21d19f 0%, #16a883 100%);
  --gradient-ambient: radial-gradient(circle at 20% 20%, rgba(124,92,252,0.25), transparent 55%),
                       radial-gradient(circle at 80% 70%, rgba(33,209,159,0.18), transparent 50%);

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;

  /* ---- Space ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Radius ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Elevation / glass ---- */
  --blur-glass: 18px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-glow-signal: 0 0 0 1px rgba(124,92,252,0.4), 0 8px 24px rgba(124,92,252,0.25);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-med: 280ms;
  --duration-slow: 600ms;

  /* ---- Layout ---- */
  --nav-height: 64px;
  --content-max: 1280px;
}

[data-theme='light'] {
  color-scheme: light;

  --color-void: #f5f4fa;
  --color-void-raised: #ffffff;
  --color-surface: rgba(20, 16, 40, 0.035);
  --color-surface-strong: rgba(20, 16, 40, 0.06);
  --color-border: rgba(20, 16, 40, 0.08);
  --color-border-strong: rgba(20, 16, 40, 0.15);
  --color-ink: #16151f;
  --color-muted: #5c5972;
  /* MPS Phase 9 (Accessibility) — was #8a879e (3.18:1 on this theme's
     --color-void), failing WCAG AA even for large text. See the dark
     theme's --color-faint above for the full reasoning; #6a6780 clears
     4.5:1 (~4.97:1) in this theme. */
  --color-faint: #6a6780;

  --color-signal: #6a45f0;
  --color-signal-strong: #5433d6;
  --color-payout: #0fa47e;
  --color-payout-strong: #0c8567;

  --gradient-ambient: radial-gradient(circle at 20% 20%, rgba(124,92,252,0.12), transparent 55%),
                       radial-gradient(circle at 80% 70%, rgba(33,209,159,0.10), transparent 50%);

  --shadow-sm: 0 2px 10px rgba(20, 16, 40, 0.08);
  --shadow-md: 0 8px 30px rgba(20, 16, 40, 0.10);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}