/* ==========================================================================
   CSS Variables & Design Tokens (5 Themes)
   ========================================================================== */

:root {
  /* Typography */
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Sizing & Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 14px;
  --space-lg: 20px;
  --space-xl: 28px;
  --space-2xl: 36px;
  
  /* Border Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  
  /* Layout */
  --mobile-max-width: 420px;
  --nav-height: 64px;
  /* Capacitor Android injects these CSS variables from WindowInsets. Keep
     env() as the browser/PWA fallback for FileDN and localhost. */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-bottom: var(--safe-area-inset-bottom, 0px);
  --safe-top: var(--safe-area-inset-top, 0px);

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   THEME 1: Light (Nature Pastel) — DEFAULT
   ========================================================================== */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg-app: #f4f7f2;
  --bg-page: #f7f9f5;
  --bg-card: #ffffff;
  --bg-card-subtle: #f0f5ee;
  --bg-card-hover: #edf4eb;
  
  --text-primary: #213326;
  --text-secondary: #5c7062;
  --text-muted: #8d9e92;
  --text-inverse: #ffffff;
  
  --accent-primary: #347a4d;
  --accent-primary-hover: #2a663f;
  --accent-primary-subtle: #e5f2e8;
  --accent-primary-light: #439b63;
  
  --accent-sun: #e9a825;
  --accent-sun-bg: #fff8e7;
  --accent-sky: #4a90e2;
  --accent-sky-bg: #eaf4fd;
  --accent-warm: #e67e22;
  --accent-warm-bg: #fdf2e9;
  --accent-rose: #d9534f;
  --accent-rose-bg: #fdeeee;
  
  --border-subtle: #e2ebe0;
  --border-focus: #347a4d;
  
  --shadow-sm: 0 2px 8px rgba(33, 51, 38, 0.04);
  --shadow-md: 0 6px 18px rgba(33, 51, 38, 0.07);
  --shadow-lg: 0 12px 32px rgba(33, 51, 38, 0.10);
  --shadow-glow: 0 8px 24px rgba(52, 122, 77, 0.25);
  
  --desktop-backdrop: radial-gradient(circle at 50% 20%, #e2efe2 0%, #cddfcb 100%);
  --nav-bg: rgba(255, 255, 255, 0.94);
}

/* ==========================================================================
   THEME 2: Sepia (Warm Paper)
   ========================================================================== */
[data-theme="sepia"] {
  color-scheme: light;
  --bg-app: #e9e0cb;
  --bg-page: #efe7d3;
  --bg-card: #faf4e6;
  --bg-card-subtle: #e6dcbe;
  --bg-card-hover: #e0d4b4;
  
  --text-primary: #433322;
  --text-secondary: #745f47;
  --text-muted: #9e8970;
  --text-inverse: #ffffff;
  
  --accent-primary: #865529;
  --accent-primary-hover: #6e441e;
  --accent-primary-subtle: #eddccb;
  --accent-primary-light: #a46c38;
  
  --accent-sun: #c78619;
  --accent-sun-bg: #f5eccd;
  --accent-sky: #5d7e97;
  --accent-sky-bg: #e2ebf0;
  --accent-warm: #b8622c;
  --accent-warm-bg: #f5e4db;
  --accent-rose: #b14844;
  --accent-rose-bg: #f4dedd;
  
  --border-subtle: #decfae;
  --border-focus: #865529;
  
  --shadow-sm: 0 2px 8px rgba(67, 51, 34, 0.05);
  --shadow-md: 0 6px 18px rgba(67, 51, 34, 0.08);
  --shadow-lg: 0 12px 32px rgba(67, 51, 34, 0.12);
  --shadow-glow: 0 8px 24px rgba(134, 85, 41, 0.22);
  
  --desktop-backdrop: radial-gradient(circle at 50% 20%, #e0d2b4 0%, #c9b996 100%);
  --nav-bg: rgba(250, 244, 230, 0.94);
}

/* ==========================================================================
   THEME 3: Light Sepia (Milk Tea)
   ========================================================================== */
[data-theme="light-sepia"] {
  color-scheme: light;
  --bg-app: #f4ede0;
  --bg-page: #fbf7ee;
  --bg-card: #ffffff;
  --bg-card-subtle: #f3ebdb;
  --bg-card-hover: #ece3cf;
  
  --text-primary: #45382c;
  --text-secondary: #786654;
  --text-muted: #a39281;
  --text-inverse: #ffffff;
  
  --accent-primary: #946337;
  --accent-primary-hover: #7b4f28;
  --accent-primary-subtle: #f4e8db;
  --accent-primary-light: #b07c4c;
  
  --accent-sun: #d19224;
  --accent-sun-bg: #fdf5e2;
  --accent-sky: #6289a3;
  --accent-sky-bg: #ebf2f7;
  --accent-warm: #c46d36;
  --accent-warm-bg: #faede5;
  --accent-rose: #be5350;
  --accent-rose-bg: #fae8e8;
  
  --border-subtle: #ebdcc8;
  --border-focus: #946337;
  
  --shadow-sm: 0 2px 8px rgba(69, 56, 44, 0.04);
  --shadow-md: 0 6px 18px rgba(69, 56, 44, 0.07);
  --shadow-lg: 0 12px 32px rgba(69, 56, 44, 0.10);
  --shadow-glow: 0 8px 24px rgba(148, 99, 55, 0.20);
  
  --desktop-backdrop: radial-gradient(circle at 50% 20%, #ede1cc 0%, #dacbaf 100%);
  --nav-bg: rgba(255, 255, 255, 0.94);
}

/* ==========================================================================
   THEME 4: Dark (Deep Slate)
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #0e1210;
  --bg-page: #141815;
  --bg-card: #1d221e;
  --bg-card-subtle: #242b26;
  --bg-card-hover: #2c352f;
  
  --text-primary: #e6ede8;
  --text-secondary: #a4b3a8;
  --text-muted: #6e7d72;
  --text-inverse: #0e1210;
  
  --accent-primary: #4bae67;
  --accent-primary-hover: #3d9656;
  --accent-primary-subtle: #1c3324;
  --accent-primary-light: #64c27f;
  
  --accent-sun: #f2b43d;
  --accent-sun-bg: #352a12;
  --accent-sky: #58a6ff;
  --accent-sky-bg: #142840;
  --accent-warm: #f08c3a;
  --accent-warm-bg: #382110;
  --accent-rose: #ea605d;
  --accent-rose-bg: #361717;
  
  --border-subtle: #2b332d;
  --border-focus: #4bae67;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 8px 24px rgba(75, 174, 103, 0.30);
  
  --desktop-backdrop: radial-gradient(circle at 50% 20%, #171e1a 0%, #0a0d0b 100%);
  --nav-bg: rgba(29, 34, 30, 0.94);
}

/* ==========================================================================
   THEME: Dark Sepia (Warm Deep Brown / Dark Sepia)
   ========================================================================== */
[data-theme="dark-sepia"] {
  color-scheme: dark;
  --bg-app: #181411;
  --bg-page: #201a16;
  --bg-card: #2b231e;
  --bg-card-subtle: #382e28;
  --bg-card-hover: #453932;
  
  --text-primary: #f5ede4;
  --text-secondary: #c9b9aa;
  --text-muted: #918172;
  --text-inverse: #181411;
  
  --accent-primary: #d49359;
  --accent-primary-hover: #e2a56e;
  --accent-primary-subtle: #3d2918;
  --accent-primary-light: #f0be8c;
  
  --accent-sun: #f2b43d;
  --accent-sun-bg: #382b13;
  --accent-sky: #6289a3;
  --accent-sky-bg: #1e2c36;
  --accent-warm: #d9783f;
  --accent-warm-bg: #3d2212;
  --accent-rose: #d6635f;
  --accent-rose-bg: #3b1c1c;
  
  --border-subtle: #42362e;
  --border-focus: #d49359;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 8px 24px rgba(212, 147, 89, 0.28);
  
  --desktop-backdrop: radial-gradient(circle at 50% 20%, #281f1a 0%, #15100d 100%);
  --nav-bg: rgba(43, 35, 30, 0.94);
}

/* ==========================================================================
   THEME 5: Light Dark (Soft Charcoal Slate / Elevated Contrast & Lighter)
   ========================================================================== */
[data-theme="light-dark"] {
  color-scheme: dark;
  --bg-app: #222a2e;
  --bg-page: #283238;
  --bg-card: #333f47;
  --bg-card-subtle: #3d4a53;
  --bg-card-hover: #485760;
  
  --text-primary: #ffffff;
  --text-secondary: #d4e0e7;
  --text-muted: #95a5b0;
  --text-inverse: #1e262a;
  
  --accent-primary: #4ade80;
  --accent-primary-hover: #38c76e;
  --accent-primary-subtle: #1e3828;
  --accent-primary-light: #6ee79c;
  
  --accent-sun: #fbbf24;
  --accent-sun-bg: #383018;
  --accent-sky: #60a5fa;
  --accent-sky-bg: #1c2e44;
  --accent-warm: #fb923c;
  --accent-warm-bg: #3d2716;
  --accent-rose: #f87171;
  --accent-rose-bg: #3d1c1c;
  
  --border-subtle: #455560;
  --border-focus: #4ade80;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.38);
  --shadow-glow: 0 8px 24px rgba(74, 222, 128, 0.28);
  
  --desktop-backdrop: radial-gradient(circle at 50% 20%, #2f3a42 0%, #1c2226 100%);
  --nav-bg: rgba(51, 63, 71, 0.94);
}

/* ==========================================================================
   THEME 6: Soft Grey (Neutral Slate / Easy on Eyes)
   ========================================================================== */
[data-theme="soft-grey"] {
  color-scheme: light;
  --bg-app: #e2e7ec;
  --bg-page: #edf1f5;
  --bg-card: #ffffff;
  --bg-card-subtle: #e6ebf1;
  --bg-card-hover: #dde3eb;
  
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #ffffff;
  
  --accent-primary: #4b6584;
  --accent-primary-hover: #384c63;
  --accent-primary-subtle: #e2e8f0;
  --accent-primary-light: #64748b;
  
  --accent-sun: #e5a823;
  --accent-sun-bg: #fff8e6;
  --accent-sky: #4a90e2;
  --accent-sky-bg: #eaf3fd;
  --accent-warm: #e67e22;
  --accent-warm-bg: #fdf3e9;
  --accent-rose: #d9534f;
  --accent-rose-bg: #fdeeee;
  
  --border-subtle: #cbd5e1;
  --border-focus: #4b6584;
  
  --shadow-sm: 0 2px 8px rgba(30, 41, 59, 0.05);
  --shadow-md: 0 6px 18px rgba(30, 41, 59, 0.08);
  --shadow-lg: 0 12px 32px rgba(30, 41, 59, 0.12);
  --shadow-glow: 0 8px 24px rgba(75, 101, 132, 0.25);
  
  --desktop-backdrop: radial-gradient(circle at 50% 20%, #e2e7ec 0%, #cbd5e1 100%);
  --nav-bg: rgba(255, 255, 255, 0.94);
}

/* ==========================================================================
   PREMIUM THEME 1: Sun Gold (Золотое солнце)
   ========================================================================== */
[data-theme="sun_gold"] {
  --bg-app: #fbf4e4;
  --bg-page: #fffbeb;
  --bg-card: #ffffff;
  --bg-card-subtle: #fef3c7;
  --bg-card-hover: #fde68a;
  
  --text-primary: #78350f;
  --text-secondary: #92400e;
  --text-muted: #b45309;
  --text-inverse: #ffffff;
  
  --accent-primary: #d97706;
  --accent-primary-hover: #b45309;
  --accent-primary-subtle: #fef3c7;
  --accent-primary-light: #f59e0b;
  
  --accent-sun: #f59e0b;
  --accent-sun-bg: #fef3c7;
  --accent-sky: #0284c7;
  --accent-sky-bg: #e0f2fe;
  --accent-warm: #ea580c;
  --accent-warm-bg: #ffedd5;
  --accent-rose: #e11d48;
  --accent-rose-bg: #ffe4e6;
  
  --border-subtle: #fde68a;
  --border-focus: #d97706;
  
  --shadow-sm: 0 2px 8px rgba(180, 83, 9, 0.06);
  --shadow-md: 0 6px 18px rgba(180, 83, 9, 0.10);
  --shadow-lg: 0 12px 32px rgba(180, 83, 9, 0.16);
  --shadow-glow: 0 8px 24px rgba(217, 119, 6, 0.28);
  
  --desktop-backdrop: radial-gradient(circle at 50% 20%, #fef3c7 0%, #fde68a 100%);
  --nav-bg: rgba(255, 251, 235, 0.95);
}

/* ==========================================================================
   PREMIUM THEME 2: Sakura Pink (Розовая сакура)
   ========================================================================== */
[data-theme="sakura_pink"] {
  --bg-app: #fdf0f3;
  --bg-page: #fff1f2;
  --bg-card: #ffffff;
  --bg-card-subtle: #ffe4e6;
  --bg-card-hover: #fce7f3;
  
  --text-primary: #881337;
  --text-secondary: #9f1239;
  --text-muted: #be185d;
  --text-inverse: #ffffff;
  
  --accent-primary: #e11d48;
  --accent-primary-hover: #be123c;
  --accent-primary-subtle: #ffe4e6;
  --accent-primary-light: #fb7185;
  
  --accent-sun: #f59e0b;
  --accent-sun-bg: #fef3c7;
  --accent-sky: #38bdf8;
  --accent-sky-bg: #f0f9ff;
  --accent-warm: #f97316;
  --accent-warm-bg: #fff7ed;
  --accent-rose: #e11d48;
  --accent-rose-bg: #ffe4e6;
  
  --border-subtle: #fecdd3;
  --border-focus: #e11d48;
  
  --shadow-sm: 0 2px 8px rgba(190, 24, 93, 0.06);
  --shadow-md: 0 6px 18px rgba(190, 24, 93, 0.10);
  --shadow-lg: 0 12px 32px rgba(190, 24, 93, 0.16);
  --shadow-glow: 0 8px 24px rgba(225, 29, 72, 0.28);
  
  --desktop-backdrop: radial-gradient(circle at 50% 20%, #ffe4e6 0%, #fce7f3 100%);
  --nav-bg: rgba(255, 241, 242, 0.95);
}

/* ==========================================================================
   PREMIUM THEME 3: Emerald Zen (Изумрудный дзен)
   ========================================================================== */
[data-theme="emerald_zen"] {
  --bg-app: #edf9f0;
  --bg-page: #f0fdf4;
  --bg-card: #ffffff;
  --bg-card-subtle: #dcfce7;
  --bg-card-hover: #bbf7d0;
  
  --text-primary: #064e3b;
  --text-secondary: #14532d;
  --text-muted: #166534;
  --text-inverse: #ffffff;
  
  --accent-primary: #16a34a;
  --accent-primary-hover: #15803d;
  --accent-primary-subtle: #dcfce7;
  --accent-primary-light: #22c55e;
  
  --accent-sun: #eab308;
  --accent-sun-bg: #fef9c3;
  --accent-sky: #0284c7;
  --accent-sky-bg: #e0f2fe;
  --accent-warm: #ea580c;
  --accent-warm-bg: #ffedd5;
  --accent-rose: #e11d48;
  --accent-rose-bg: #ffe4e6;
  
  --border-subtle: #bbf7d0;
  --border-focus: #16a34a;
  
  --shadow-sm: 0 2px 8px rgba(22, 101, 52, 0.06);
  --shadow-md: 0 6px 18px rgba(22, 101, 52, 0.10);
  --shadow-lg: 0 12px 32px rgba(22, 101, 52, 0.16);
  --shadow-glow: 0 8px 24px rgba(22, 163, 74, 0.28);
  
  --desktop-backdrop: radial-gradient(circle at 50% 20%, #dcfce7 0%, #bbf7d0 100%);
  --nav-bg: rgba(240, 253, 244, 0.95);
}

/* ==========================================================================
   PREMIUM THEME 4: Sky Focus (Лазурный фокус)
   ========================================================================== */
[data-theme="sky_focus"] {
  --bg-app: #ebf5fb;
  --bg-page: #f0f9ff;
  --bg-card: #ffffff;
  --bg-card-subtle: #e0f2fe;
  --bg-card-hover: #bae6fd;
  
  --text-primary: #0c4a6e;
  --text-secondary: #0369a1;
  --text-muted: #0284c7;
  --text-inverse: #ffffff;
  
  --accent-primary: #0284c7;
  --accent-primary-hover: #0369a1;
  --accent-primary-subtle: #e0f2fe;
  --accent-primary-light: #38bdf8;
  
  --accent-sun: #f59e0b;
  --accent-sun-bg: #fef3c7;
  --accent-sky: #0284c7;
  --accent-sky-bg: #e0f2fe;
  --accent-warm: #ea580c;
  --accent-warm-bg: #ffedd5;
  --accent-rose: #e11d48;
  --accent-rose-bg: #ffe4e6;
  
  --border-subtle: #bae6fd;
  --border-focus: #0284c7;
  
  --shadow-sm: 0 2px 8px rgba(3, 105, 161, 0.06);
  --shadow-md: 0 6px 18px rgba(3, 105, 161, 0.10);
  --shadow-lg: 0 12px 32px rgba(3, 105, 161, 0.16);
  --shadow-glow: 0 8px 24px rgba(2, 132, 199, 0.28);
  
  --desktop-backdrop: radial-gradient(circle at 50% 20%, #e0f2fe 0%, #bae6fd 100%);
  --nav-bg: rgba(240, 249, 255, 0.95);
}

/* ==========================================================================
   PREMIUM THEME 5: Lavender Magic (Лавандовая магия)
   ========================================================================== */
[data-theme="lavender_magic"] {
  --bg-app: #f5eefd;
  --bg-page: #faf5ff;
  --bg-card: #ffffff;
  --bg-card-subtle: #f3e8ff;
  --bg-card-hover: #e9d5ff;
  
  --text-primary: #581c87;
  --text-secondary: #6b21a8;
  --text-muted: #7e22ce;
  --text-inverse: #ffffff;
  
  --accent-primary: #9333ea;
  --accent-primary-hover: #7e22ce;
  --accent-primary-subtle: #f3e8ff;
  --accent-primary-light: #c084fc;
  
  --accent-sun: #f59e0b;
  --accent-sun-bg: #fef3c7;
  --accent-sky: #38bdf8;
  --accent-sky-bg: #f0f9ff;
  --accent-warm: #ea580c;
  --accent-warm-bg: #ffedd5;
  --accent-rose: #e11d48;
  --accent-rose-bg: #ffe4e6;
  
  --border-subtle: #e9d5ff;
  --border-focus: #9333ea;
  
  --shadow-sm: 0 2px 8px rgba(126, 34, 206, 0.06);
  --shadow-md: 0 6px 18px rgba(126, 34, 206, 0.10);
  --shadow-lg: 0 12px 32px rgba(126, 34, 206, 0.16);
  --shadow-glow: 0 8px 24px rgba(147, 51, 234, 0.28);
  
  --desktop-backdrop: radial-gradient(circle at 50% 20%, #f3e8ff 0%, #e9d5ff 100%);
  --nav-bg: rgba(250, 245, 255, 0.95);
}

/* ==========================================================================
   PREMIUM THEME 6: Cyber Neon (Кибер неон)
   ========================================================================== */
[data-theme="cyber_neon"] {
  --bg-app: #050811;
  --bg-page: #090d1a;
  --bg-card: #10172a;
  --bg-card-subtle: #162038;
  --bg-card-hover: #1e2c4d;
  
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #090d1a;
  
  --accent-primary: #06b6d4;
  --accent-primary-hover: #22d3ee;
  --accent-primary-subtle: rgba(6, 182, 212, 0.16);
  --accent-primary-light: #67e8f9;
  
  --accent-sun: #facc15;
  --accent-sun-bg: rgba(250, 204, 21, 0.16);
  --accent-sky: #38bdf8;
  --accent-sky-bg: rgba(56, 189, 248, 0.16);
  --accent-warm: #fb923c;
  --accent-warm-bg: rgba(251, 146, 60, 0.16);
  --accent-rose: #f43f5e;
  --accent-rose-bg: rgba(244, 63, 94, 0.16);
  
  --border-subtle: #1e293b;
  --border-focus: #06b6d4;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.70);
  --shadow-glow: 0 8px 24px rgba(6, 182, 212, 0.35);
  
  --desktop-backdrop: radial-gradient(circle at 50% 20%, #172554 0%, #030712 100%);
  --nav-bg: rgba(16, 23, 42, 0.95);
}