/*
 * ============================================================
 * Warm Amber Theme — CSS Custom Property System
 * ============================================================
 *
 * All colors and design tokens for the AreYouAlive landing page
 * are defined here as CSS custom properties. NO hardcoded color
 * values should exist in styles.css or index.html.
 *
 * Dark navy background with warm amber/gold accents.
 * Font: Space Grotesk for headings, Inter for body, JetBrains Mono for mono.
 *
 * Variable Reference:
 *
 * BACKGROUNDS
 * --bg-primary:        Main page background (dark navy)
 * --bg-secondary:      Alternate section background (slightly lighter navy)
 * --bg-surface:        Cards, panels, elevated elements
 * --bg-surface-hover:  Card/surface hover state
 * --bg-phone:          Phone mockup screen background
 * --bg-bubble-system:  SMS bubble background for system messages
 * --bg-bubble-user:    SMS bubble background for user messages
 *
 * BORDERS
 * --border-default:    Default border color for cards, dividers
 * --border-hover:      Border color on hover states
 * --border-accent:     Border color using the accent (for premium card)
 *
 * TEXT
 * --text-primary:      Main text color (off-white)
 * --text-secondary:    Secondary/muted text (gray)
 * --text-tertiary:     Tertiary/dim text (dark gray)
 * --text-on-accent:    Text on accent-colored backgrounds
 * --text-bubble-system: Text inside system SMS bubbles
 * --text-bubble-user:  Text inside user SMS bubbles
 *
 * ACCENT COLORS
 * --accent-primary:       Primary accent (warm amber)
 * --accent-primary-hover: Primary accent hover state (brighter amber)
 * --accent-secondary:     Secondary accent
 * --accent-success:       Success state color
 * --accent-danger:        Danger/error state color
 * --accent-glow:          Subtle glow for premium card border
 *
 * NAVIGATION
 * --nav-bg:           Navbar background (transparent)
 * --nav-bg-scrolled:  Navbar background after scrolling
 * --nav-border:       Navbar bottom border color
 *
 * TYPOGRAPHY
 * --font-heading:  Heading font stack (Space Grotesk)
 * --font-body:     Body text font stack (Inter)
 * --font-mono:     Monospace font stack (JetBrains Mono)
 *
 * BORDER RADIUS
 * --radius-sm:    Small radius (4px)
 * --radius-md:    Medium radius (8px)
 * --radius-lg:    Large radius (12px)
 * --radius-xl:    Extra large radius (16px)
 * --radius-full:  Full/pill radius (9999px)
 *
 * SHADOWS
 * --shadow-card:     Subtle card shadow
 * --shadow-elevated: Elevated element shadow
 *
 * TRANSITIONS
 * --transition-fast:    Fast transition (150ms)
 * --transition-default: Default transition (300ms)
 * --transition-slow:    Slow transition (500ms)
 *
 * SPACING
 * --section-padding-y:  Vertical padding for sections
 *
 * ============================================================
 */

:root {
  /* Backgrounds */
  --bg-primary: #111113;
  --bg-secondary: #161618;
  --bg-surface: #1C1C1F;
  --bg-surface-hover: #222225;
  --bg-phone: #111113;
  --bg-bubble-system: #252528;
  --bg-bubble-user: #F59E0B;

  /* Borders */
  --border-default: #2A2A2D;
  --border-hover: #3A3A3E;
  --border-accent: #F59E0B;

  /* Text */
  --text-primary: #ECECEC;
  --text-secondary: #909096;
  --text-tertiary: #5C5C63;
  --text-on-accent: #111113;
  --text-bubble-system: #ECECEC;
  --text-bubble-user: #111113;

  /* Accents */
  --accent-primary: #F59E0B;
  --accent-primary-hover: #FBBF24;
  --accent-secondary: #F59E0B;
  --accent-success: #F59E0B;
  --accent-danger: #F87171;
  --accent-glow: rgba(245, 158, 11, 0.12);

  /* Navigation */
  --nav-bg: rgba(17, 17, 19, 0);
  --nav-bg-scrolled: rgba(17, 17, 19, 0.9);
  --nav-border: #2A2A2D;

  /* Typography */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.5);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-default: 300ms ease;
  --transition-slow: 500ms ease;

  /* Spacing */
  --section-padding-y: 120px;
}