/**
 * LoveJili Design Tokens & Typography System
 * Brand Signature: Passion Ruby (#FF2D6C) & Sunburst Amber (#FFB703) on Velvet Obsidian (#0E0B16)
 * Distinct, Non-Identical Aesthetic engineered for high-converting Philippine iGaming mobile UX
 */

:root {
  /* Canonical Short Tokens */
  --primary: #FF2D6C;
  --accent: #FFB703;
  --surface: #161124;
  --bg: #0E0B16;
  --bg-desktop: #08060B;

  /* Brand Signature Colors */
  --brand-primary: #FF2D6C;
  --brand-primary-dark: #D81B55;
  --brand-primary-light: #FF5A8D;
  --brand-accent-amber: #FFB703;
  --brand-accent-gold: #FFC837;
  --brand-accent-coral: #FF6B4A;

  /* Surfaces & Velvet Obsidian Hierarchy */
  --surface-base: #0E0B16;
  --surface-elevated: #201833;
  --surface-card: #191328;
  --surface-card-hover: #241C38;
  --surface-card-border: rgba(255, 45, 108, 0.2);
  --surface-border-subtle: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 45, 108, 0.22);
  --border-gold: rgba(255, 183, 3, 0.28);
  --border-subtle: rgba(255, 255, 255, 0.08);

  /* Text & Readability (High Contrast) */
  --text-main: #FFFFFF;
  --text-primary: #FFFFFF;
  --text-secondary: #E4E0EC;
  --text-muted: #9B94A8;
  --text-gold: #FFC837;
  --text-ruby: #FF2D6C;
  --text-link: #FFB703;

  /* Payment & Trust Accents */
  --trust-green: #00D084;
  --gcash-blue: #007DFE;
  --maya-green: #00E080;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #0E0B16 0%, #221433 50%, #0E0B16 100%);
  --gradient-brand-cta: linear-gradient(135deg, #FF2D6C 0%, #FF5A43 50%, #FFB703 100%);
  --gradient-ruby-cta: linear-gradient(180deg, #FF4B85 0%, #FF2D6C 50%, #C7164F 100%);
  --gradient-gold-cta: linear-gradient(180deg, #FFE07D 0%, #FFB703 50%, #D48800 100%);
  --gradient-card: linear-gradient(145deg, #1C152D 0%, #110D1B 100%);
  --gradient-pill-active: linear-gradient(135deg, rgba(255, 45, 108, 0.25) 0%, rgba(255, 183, 3, 0.15) 100%);

  /* Shadows & Glows */
  --shadow-brand-glow: 0 0 22px rgba(255, 45, 108, 0.4);
  --shadow-gold-glow: 0 0 22px rgba(255, 183, 3, 0.4);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-elevated: 0 14px 36px rgba(0, 0, 0, 0.75);

  /* Typography Scale */
  --font-heading: 'Plus Jakarta Sans', 'Avenir', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Layout Viewport */
  --app-max-width: 430px;
  --header-height: 56px;
  --bottom-nav-height: 64px;
}