/* Design tokens. Target: Android WebView 106 & 1280x800 IPS Display.
   HCI & VisionOS / Apple Home Design System
   High Distance Glanceability & Luminous Organic Materials */

:root {
  /* ================================================================= Dark Theme: Midnight Obsidian Glass */
  --canvas-bg: radial-gradient(130% 120% at 20% 0%, #151928 0%, #0D1018 45%, #07080B 100%);
  --paper: #090B10;
  --paper-2: #12151E;
  
  /* Luminous Translucent Glass Plates */
  --card: rgba(24, 28, 42, 0.72);
  --card-hover: rgba(32, 38, 56, 0.82);
  --card-active: rgba(40, 48, 70, 0.92);
  --card-solid: #151824;
  --card-border: rgba(255, 255, 255, 0.08);
  --card-border-glow: rgba(255, 255, 255, 0.16);
  --card-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --glass-blur: blur(28px);

  /* High Distance-Readability Typographic Contrast (WCAG AAA) */
  --ink: #FFFFFF;
  --ink-rgb: 255 255 255;
  --ink-2: #C4C8DC;
  --mute: #7F849B;
  --line: rgba(255, 255, 255, 0.08);
  --line-subtle: rgba(255, 255, 255, 0.045);

  /* Vivid Apple Signals & Accents */
  --apple-music: #FA2D55;
  --apple-music-glow: rgba(250, 45, 85, 0.28);
  --sonos-active: #10B981;
  --sonos-glow: rgba(16, 185, 129, 0.3);
  --lucy-brand: #007A50;
  --lucy-glow: rgba(0, 122, 80, 0.28);
  --amazon-brand: #FF9900;
  --amazon-glow: rgba(255, 153, 0, 0.28);
  --alert: #FF453A;
  --amber: #F59E0B;
  --amber-glow: rgba(245, 158, 11, 0.28);
  --sunset: #F97316;
  --twilight: #8B5CF6;
  --celestial: #3B82F6;
  --ok: #10B981;

  /* Typography Scale (Optimized for 6-10 ft wall viewing) */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", Roboto, system-ui, sans-serif;
  --serif: "New York", "Charter", "Instrument Serif", Georgia, serif;
  
  --fs-clock: 58px;
  --fs-hero: 38px;
  --fs-l: 26px;
  --fs-m: 20px;
  --fs-body: 17px;
  --fs-label: 14px;
  --fs-badge: 12px;

  /* Radii & Curves */
  --r-xl: 22px;
  --r-l: 18px;
  --r: 14px;
  --r-s: 10px;
  --r-pill: 9999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================================================================= Light Theme: Atelier Alabaster Glass */
.stage[data-theme="light"] {
  --canvas-bg: radial-gradient(130% 120% at 20% 0%, #FFFFFF 0%, #F5F1E8 50%, #ECE5D7 100%);
  --paper: #F6F2EA;
  --paper-2: #EBE5D8;
  
  /* Luminous Milk Glass Plates */
  --card: rgba(255, 255, 255, 0.84);
  --card-hover: rgba(255, 255, 255, 0.96);
  --card-active: rgba(246, 241, 232, 0.98);
  --card-solid: #FFFFFF;
  --card-border: rgba(255, 255, 255, 0.95);
  --card-border-glow: rgba(30, 24, 16, 0.14);
  --card-shadow: 0 12px 36px rgba(45, 36, 20, 0.07), 0 2px 8px rgba(45, 36, 20, 0.04);
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, 1);

  /* Deep High-Contrast Typography */
  --ink: #111216;
  --ink-rgb: 17 18 22;
  --ink-2: #484B5B;
  --mute: #76798C;
  --line: rgba(24, 20, 14, 0.075);
  --line-subtle: rgba(24, 20, 14, 0.04);

  --sonos-active: #059669;
  --sonos-glow: rgba(5, 150, 105, 0.22);
  --lucy-brand: #007A50;
  --lucy-glow: rgba(0, 122, 80, 0.2);
  --amazon-brand: #E07A00;
  --amazon-glow: rgba(224, 122, 0, 0.2);
  --amber-glow: rgba(245, 158, 11, 0.2);
}