/* ============================================
   THEME VARIABLES — Dark (default) + Light
   ============================================ */

:root,
[data-theme="dark"] {
  /* Background layers */
  --bg:             #0A0A0B;
  --bg2:            #111113;
  --bg3:            #18181B;
  --glass:          rgba(255,255,255,0.03);
  --glass-border:   rgba(255,255,255,0.06);
  --glass-hover:    rgba(255,255,255,0.08);

  /* Text */
  --text:           #F4F4F5;
  --text2:          #A1A1AA;
  --text3:          #828290;

  /* Accents */
  --orange:         #FF6B2C;
  --orange-glow:    rgba(255,107,44,0.15);
  --blue:           #3B82F6;
  --violet:         #8B5CF6;
  --cyan:           #06B6D4;
  --green:          #22C55E;

  /* Component-specific */
  --nav-bg:         rgba(10,10,11,0.6);
  --card-shadow:    rgba(0,0,0,0.3);
  --phone-bg:       #000000;
  --phone-screen:   var(--bg2);
  --msg-ai-bg:      rgba(255,255,255,0.07);
  --msg-ai-text:    rgba(255,255,255,0.85);
  --input-bg:       var(--bg);
  --orb-opacity:    0.4;
  --scanline-color: rgba(255,255,255,0.01);

  /* Toggle icon */
  --toggle-icon:    "☾";
}

[data-theme="light"] {
  /* Background layers */
  --bg:             #F8F8FA;
  --bg2:            #FFFFFF;
  --bg3:            #F7F7F9;
  --glass:          rgba(0,0,0,0.02);
  --glass-border:   rgba(0,0,0,0.07);
  --glass-hover:    rgba(0,0,0,0.05);

  /* Text */
  --text:           #18181B;
  --text2:          #52525B;
  --text3:          #6B6B74;

  /* Accents — same orange family, slightly warmer */
  --orange:         #E85D1E;
  --orange-glow:    rgba(232,93,30,0.12);
  --blue:           #2563EB;
  --violet:         #7C3AED;
  --cyan:           #0891B2;
  --green:          #16A34A;

  /* Component-specific */
  --nav-bg:         rgba(248,248,250,0.75);
  --card-shadow:    rgba(0,0,0,0.06);
  --phone-bg:       #1A1A1E;
  --phone-screen:   #27272A;
  --msg-ai-bg:      rgba(255,255,255,0.12);
  --msg-ai-text:    rgba(255,255,255,0.9);
  --input-bg:       #F0F0F3;
  --orb-opacity:    0.15;
  --scanline-color: rgba(0,0,0,0.015);

  /* Toggle icon */
  --toggle-icon:    "☀";
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
:root {
  --font-display: 'Syne', sans-serif;
  --font-body:    'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --r:            16px;
  --r-sm:         10px;
  --max:          1240px;
}