/* =============================================================
   BEYLI DESIGN TOKENS
   Single source of truth for every screen in mobile/ and web/.
   Reconstructed from the Beyli design system (tokens/colors.css,
   tokens/spacing.css, tokens/effects.css, and the typography/font
   custom properties used throughout the component library).
   ============================================================= */

/* ---------- Fonts ---------- */
:root {
  --font-body: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-mono: "Spline Sans Mono", "SF Mono", monospace;
}

/* ---------- Color system ----------
   Derived from the Beyli logo: signal yellow #FFD218, deep indigo #260E50.
   Yellow = energy/action accents. Indigo = brand ink & dark live surfaces. */
:root {
  /* Brand core */
  --beyli-yellow: #FFD218;
  --beyli-yellow-hover: #F5C400;
  --beyli-yellow-press: #E3B400;
  --beyli-yellow-soft: #FFF6CC; /* tint for badges/backgrounds (light) */
  --beyli-indigo: #260E50;
  --beyli-indigo-hover: #331570;
  --beyli-indigo-press: #1C0A3D;
  --beyli-indigo-soft: #EEE9F8;
  /* Electric violet — live energy accent */
  --beyli-violet: oklch(0.55 0.24 295); /* #6E30E0-ish */
  --beyli-violet-hover: oklch(0.50 0.24 295);
  --beyli-violet-soft: oklch(0.94 0.04 295);

  /* Live red — reserved for LIVE state only, never CTAs */
  --beyli-live: oklch(0.60 0.22 25);
  --beyli-live-soft: oklch(0.95 0.03 25);

  /* Semantic */
  --color-success: oklch(0.60 0.14 160);
  --color-success-soft: oklch(0.95 0.04 160);
  --color-danger: oklch(0.58 0.20 25);
  --color-danger-soft: oklch(0.95 0.03 25);
  --color-warning: #B87E00;
  --color-warning-soft: #FFF6CC;
  --color-info: oklch(0.55 0.18 265);
  /* The verified mark. Deliberately its own token rather than reusing
     --color-info: that is a UI state for notices, this is an identity
     signal, and the two must be free to move independently. Chosen to
     hold up on the light profile surfaces and the near-black live room. */
  --verified-blue: oklch(0.62 0.19 250);
  --color-info-soft: oklch(0.95 0.03 265);

  /* Neutrals — cool violet-tinted */
  --ink-1: #17102E; /* headings, primary text */
  --ink-2: #4A4462; /* body secondary */
  --ink-3: #7C7691; /* placeholder, meta */
  --ink-4: #B7B2C6; /* disabled */
  --line-1: #E6E3EE; /* borders */
  --line-2: #F0EEF6; /* hairlines, dividers */

  /* Light surfaces (browse/shop mode) */
  --surface-page: #FAF9FC;
  --surface-card: #FFFFFF;
  --surface-sunken: #F3F1F8;
  --surface-overlay: rgba(23, 16, 46, 0.55);

  /* Dark surfaces (live mode) — .beyli-dark scope below */
  --dark-page: #120A29;
  --dark-card: #1D1240;
  --dark-elevated: #291B52;
  --dark-line: rgba(255, 255, 255, 0.12);
  --dark-ink-1: #FFFFFF;
  --dark-ink-2: rgba(255, 255, 255, 0.72);
  --dark-ink-3: rgba(255, 255, 255, 0.48);

  /* Semantic aliases */
  --text-heading: var(--ink-1);
  --text-body: var(--ink-2);
  --text-meta: var(--ink-3);
  --text-on-yellow: var(--beyli-indigo);
  --text-on-indigo: #FFFFFF;
  --action-primary: var(--beyli-yellow);
  --action-secondary: var(--beyli-indigo);
  --focus-ring: 0 0 0 3px rgba(110, 48, 224, 0.35);
  --link: var(--beyli-violet);
  --link-hover: var(--beyli-violet-hover);
}

/* Dark scope — apply .beyli-dark to any live-mode surface
   (live room, host room, audio room are ALWAYS dark regardless of theme) */
.beyli-dark {
  --surface-page: var(--dark-page);
  --surface-card: var(--dark-card);
  --surface-sunken: #0D0720;
  --line-1: var(--dark-line);
  --line-2: rgba(255, 255, 255, 0.07);
  --ink-1: var(--dark-ink-1);
  --ink-2: var(--dark-ink-2);
  --ink-3: var(--dark-ink-3);
  --ink-4: rgba(255, 255, 255, 0.3);
  --text-heading: var(--dark-ink-1);
  --text-body: var(--dark-ink-2);
  --text-meta: var(--dark-ink-3);
  --beyli-violet-soft: rgba(110, 48, 224, 0.25);
  --beyli-yellow-soft: rgba(255, 210, 24, 0.16);
  --link: #B79BFF;
}

/* ---------- Typography scale ---------- */
:root {
  --text-hero: 800 clamp(40px, 5vw, 64px) / 1.02 var(--font-display);
  --text-h1: 800 34px / 1.1 var(--font-display);
  --text-h2: 700 26px / 1.15 var(--font-display);
  --text-h3: 700 20px / 1.25 var(--font-display);
  --text-title: 700 16px / 1.35 var(--font-body);
  --text-body-lg: 400 16px / 1.5 var(--font-body);
  --text-body-md: 400 14px / 1.5 var(--font-body);
  /* The small step of the body scale. Four admin screens referenced this
     before it existed, so `font: var(--text-body-sm)` was invalid at
     computed-value time and those notes silently inherited their parent
     font instead. Body copy, not a label: the same 1.5 leading as the
     rest of the body ramp, one step down from body-md. */
  --text-body-sm: 400 13px / 1.5 var(--font-body);
  --text-label: 600 13px / 1.3 var(--font-body);
  --text-caption: 500 12px / 1.35 var(--font-body);
  --text-overline: 700 11px / 1.2 var(--font-body);
  --text-price: 700 18px / 1.2 var(--font-mono);
  --text-timer: 600 14px / 1.2 var(--font-mono);
  --tracking-display: -0.02em;
  --tracking-overline: 0.08em;
}

/* ---------- Spacing & radius — 4px base grid ---------- */
:root {
  --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;

  /* Radii — squircle-generous, echoing the logo tile */
  --radius-xs: 6px; /* tags, checkboxes */
  --radius-sm: 10px; /* inputs, small cards */
  --radius-md: 14px; /* cards */
  --radius-lg: 20px; /* modals, feature cards */
  --radius-pill: 999px; /* buttons, chips, badges — always pill */

  /* Layout */
  --page-max: 1240px;
  --gutter-mobile: 16px;
  --gutter-desktop: 24px;
  --touch-target: 44px; /* minimum hit target */
}

/* ---------- Elevation & motion ---------- */
:root {
  --shadow-sm: 0 1px 2px rgba(23, 16, 46, 0.06), 0 1px 3px rgba(23, 16, 46, 0.08);
  --shadow-md: 0 4px 12px rgba(23, 16, 46, 0.10), 0 2px 4px rgba(23, 16, 46, 0.06);
  --shadow-lg: 0 12px 32px rgba(23, 16, 46, 0.16), 0 4px 8px rgba(23, 16, 46, 0.06);
  --shadow-yellow-glow: 0 4px 20px rgba(255, 210, 24, 0.35);
  --shadow-live-glow: 0 0 0 2px var(--beyli-yellow), 0 4px 16px rgba(255, 210, 24, 0.4);

  --ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  --blur-glass: blur(16px);
  --overlay-protect: linear-gradient(180deg, rgba(18, 10, 41, 0) 0%, rgba(18, 10, 41, 0.85) 100%);
}

@keyframes beyli-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@keyframes beyli-spin {
  to { transform: rotate(360deg); }
}
@keyframes beyli-pop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}