/* ==========================================================================
   Vyoma Pocket — 120Hz High-Framerate Design System Tokens & Physics
   Light & Dark Mode (Browser Default Preference + Manual Toggle)
   ========================================================================== */

:root {
  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Plus Jakarta Sans', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 28px;

  /* Color Palette — Default Light Mode */
  --bg: #FAF7F2;
  --bg-canvas: #FAF7F2;
  --bg-secondary: #F3EDE3;
  --bg-tertiary: #EBE2D5;
  
  --surface: rgba(255, 255, 255, 0.88);
  --surface-solid: #FFFFFF;
  --surface-card: rgba(255, 255, 255, 0.94);
  --surface-hover: rgba(255, 255, 255, 0.98);
  --surface-subtle: rgba(255, 91, 0, 0.05);

  --ink: #16120E;
  --ink-soft: #544B43;
  --ink-muted: #887C72;
  --ink-faint: #B5ABA0;

  --border: #E8E0D5;
  --border-light: rgba(255, 255, 255, 0.7);
  --border-hover: #D5C8B8;
  --border-orange: rgba(255, 91, 0, 0.35);

  --orange: #FF5B00;
  --orange-light: #FF7A2E;
  --orange-soft: #FFF2EB;
  --orange-soft-2: #FFE4D4;
  --orange-dark: #D64500;
  --orange-glow: rgba(255, 91, 0, 0.35);

  --green: #10B981;
  --green-soft: #ECFDF5;
  --green-border: rgba(16, 185, 129, 0.25);

  --blue: #2563EB;
  --blue-soft: #EFF6FF;

  --purple: #8B5CF6;
  --purple-soft: #F5F3FF;

  /* Chrome & Glass Tinting */
  --header-bg: rgba(250, 247, 242, 0.86);
  --header-bg-scrolled: rgba(255, 255, 255, 0.94);
  --nav-bg: rgba(243, 237, 227, 0.75);
  --nav-hover-bg: rgba(255, 255, 255, 0.7);
  --nav-active-bg: #16120E;
  --nav-active-ink: #FFFFFF;
  --mobile-nav-bg: rgba(255, 255, 255, 0.95);

  /* Sizing & Radii */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* High-Refresh Shadows */
  --shadow-sm: 0 2px 8px rgba(22, 18, 14, 0.03), 0 1px 2px rgba(22, 18, 14, 0.02);
  --shadow-card: 0 4px 20px -4px rgba(22, 18, 14, 0.05), 0 1px 3px rgba(22, 18, 14, 0.03);
  --shadow-card-hover: 0 20px 40px -8px rgba(255, 91, 0, 0.16), 0 6px 16px -4px rgba(22, 18, 14, 0.05);
  --shadow-lift: 0 28px 56px -12px rgba(22, 18, 14, 0.16), 0 10px 28px -4px rgba(255, 91, 0, 0.18);
  --shadow-modal: 0 32px 64px -16px rgba(22, 18, 14, 0.28);

  /* 120Hz ProMotion Spring Physics & Curves */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-fast: cubic-bezier(0.2, 0.8, 0.2, 1);
  --trans-instant: 120ms var(--ease);
  --trans-smooth: 240ms var(--ease);
  --trans-spring: 320ms var(--ease-spring);
}

/* ==========================================================================
   Dark Mode Design Tokens — Warm Carbon & Obsidian with Vibrant Amber Accents
   Applies when:
   1) Explicit toggle [data-theme="dark"]
   2) Browser / OS Default prefers-color-scheme: dark (unless explicitly set to light)
   ========================================================================== */

:root[data-theme="dark"] {
  --bg: #0D0B09;
  --bg-canvas: #0D0B09;
  --bg-secondary: #17130F;
  --bg-tertiary: #221C16;

  --surface: rgba(25, 20, 16, 0.88);
  --surface-solid: #1B1612;
  --surface-card: rgba(27, 22, 17, 0.94);
  --surface-hover: rgba(38, 30, 23, 0.98);
  --surface-subtle: rgba(255, 122, 46, 0.14);

  --ink: #F7F2EC;
  --ink-soft: #CDC2B4;
  --ink-muted: #968979;
  --ink-faint: #635647;

  --border: rgba(255, 255, 255, 0.10);
  --border-light: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 122, 46, 0.5);
  --border-orange: rgba(255, 122, 46, 0.5);

  --orange: #FF7A2E;
  --orange-light: #FFA166;
  --orange-soft: rgba(255, 122, 46, 0.18);
  --orange-soft-2: rgba(255, 122, 46, 0.32);
  --orange-dark: #FF9248;
  --orange-glow: rgba(255, 122, 46, 0.45);

  --green: #10B981;
  --green-soft: rgba(16, 185, 129, 0.18);
  --green-border: rgba(16, 185, 129, 0.35);

  --blue: #3B82F6;
  --blue-soft: rgba(59, 130, 246, 0.18);

  --purple: #A78BFA;
  --purple-soft: rgba(167, 139, 250, 0.18);

  /* High-Refresh Shadows in Dark Mode */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 4px 20px -4px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 20px 40px -8px rgba(255, 122, 46, 0.24), 0 6px 16px -4px rgba(0, 0, 0, 0.65);
  --shadow-lift: 0 28px 56px -12px rgba(0, 0, 0, 0.8), 0 10px 28px -4px rgba(255, 122, 46, 0.24);
  --shadow-modal: 0 32px 64px -16px rgba(0, 0, 0, 0.9);

  /* Chrome & Glass Tinting in Dark Mode */
  --header-bg: rgba(13, 11, 9, 0.88);
  --header-bg-scrolled: rgba(18, 15, 12, 0.96);
  --nav-bg: rgba(27, 22, 17, 0.85);
  --nav-hover-bg: rgba(43, 34, 26, 0.85);
  --nav-active-bg: #F7F2EC;
  --nav-active-ink: #0D0B09;
  --mobile-nav-bg: rgba(18, 15, 12, 0.96);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D0B09;
    --bg-canvas: #0D0B09;
    --bg-secondary: #17130F;
    --bg-tertiary: #221C16;

    --surface: rgba(25, 20, 16, 0.88);
    --surface-solid: #1B1612;
    --surface-card: rgba(27, 22, 17, 0.94);
    --surface-hover: rgba(38, 30, 23, 0.98);
    --surface-subtle: rgba(255, 122, 46, 0.14);

    --ink: #F7F2EC;
    --ink-soft: #CDC2B4;
    --ink-muted: #968979;
    --ink-faint: #635647;

    --border: rgba(255, 255, 255, 0.10);
    --border-light: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 122, 46, 0.5);
    --border-orange: rgba(255, 122, 46, 0.5);

    --orange: #FF7A2E;
    --orange-light: #FFA166;
    --orange-soft: rgba(255, 122, 46, 0.18);
    --orange-soft-2: rgba(255, 122, 46, 0.32);
    --orange-dark: #FF9248;
    --orange-glow: rgba(255, 122, 46, 0.45);

    --green: #10B981;
    --green-soft: rgba(16, 185, 129, 0.18);
    --green-border: rgba(16, 185, 129, 0.35);

    --blue: #3B82F6;
    --blue-soft: rgba(59, 130, 246, 0.18);

    --purple: #A78BFA;
    --purple-soft: rgba(167, 139, 250, 0.18);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 4px 20px -4px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 20px 40px -8px rgba(255, 122, 46, 0.24), 0 6px 16px -4px rgba(0, 0, 0, 0.65);
    --shadow-lift: 0 28px 56px -12px rgba(0, 0, 0, 0.8), 0 10px 28px -4px rgba(255, 122, 46, 0.24);
    --shadow-modal: 0 32px 64px -16px rgba(0, 0, 0, 0.9);

    --header-bg: rgba(13, 11, 9, 0.88);
    --header-bg-scrolled: rgba(18, 15, 12, 0.96);
    --nav-bg: rgba(27, 22, 17, 0.85);
    --nav-hover-bg: rgba(43, 34, 26, 0.85);
    --nav-active-bg: #F7F2EC;
    --nav-active-ink: #0D0B09;
    --mobile-nav-bg: rgba(18, 15, 12, 0.96);
  }
}

/* ==========================================================================
   Theme Toggle Micro-Component Styles
   ========================================================================== */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--nav-bg);
  border: 1px solid var(--border);
  color: var(--ink);
  cursor: pointer;
  transition: transform 220ms var(--ease-spring), background 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  user-select: none;
}
.theme-toggle-btn:hover {
  background: var(--nav-hover-bg);
  color: var(--orange);
  transform: translateY(-2px) scale(1.06);
  box-shadow: var(--shadow-card);
  border-color: var(--border-hover);
}
.theme-toggle-btn:active {
  transform: scale(0.92);
}
.theme-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 320ms var(--ease-spring), opacity 200ms var(--ease);
}

/* Light Mode: Moon visible (click to activate Dark) */
.theme-toggle-icon--sun {
  display: none;
  color: #FFA166;
}
.theme-toggle-icon--moon {
  display: flex;
  color: var(--ink-soft);
}

/* Dark Mode: Sun visible (click to activate Light) */
:root[data-theme="dark"] .theme-toggle-icon--sun {
  display: flex;
}
:root[data-theme="dark"] .theme-toggle-icon--moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle-icon--sun {
    display: flex;
  }
  :root:not([data-theme="light"]) .theme-toggle-icon--moon {
    display: none;
  }
}