/**
 * ALPHA SALES — Design Tokens (Source of Truth: morrow - personal os screenshots)
 * Exact colors, fonts, radii, and shadows from the 5 uploaded screenshots
 */

:root {
  /* Surface & Background Palette */
  --bg-app: #F8FAFC;
  --bg-neutral: #F0F4F9;
  --bg-surface: #FFFFFF;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-glass: rgba(255, 255, 255, 0.72);
  --bg-card-sub: rgba(255, 255, 255, 0.55);
  --bg-nav: rgba(255, 255, 255, 0.68);
  --bg-overlay: rgba(15, 23, 42, 0.35);

  /* Primary Accent: Refined Aquamarine / Mint Glass (Source of Truth: Rudi User Pill) */
  --accent-primary: rgba(127, 255, 212, 0.25);
  --accent-primary-hover: rgba(127, 255, 212, 0.45);
  --accent-primary-border: #7FFFD4;
  --accent-primary-dark: #134e4a;
  --accent-primary-soft: rgba(127, 255, 212, 0.20);
  --accent-primary-glow: rgba(20, 184, 166, 0.20);
  --color-primary-text: #134e4a;
  --color-primary-icon: #134e4a;
  --active-pill-bg: rgba(127, 255, 212, 0.25);
  --active-pill-border: #7FFFD4;
  --active-pill-text: #134e4a;
  --active-pill-shadow: 0 1px 4px rgba(20, 184, 166, 0.15);
  --bg-app-gradient: radial-gradient(circle at 15% 15%, rgba(127, 255, 212, 0.18) 0%, transparent 40%),
                     radial-gradient(circle at 85% 40%, rgba(99, 102, 241, 0.14) 0%, transparent 45%),
                     radial-gradient(circle at 40% 85%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
                     linear-gradient(180deg, #F0F4F9 0%, #E8EEF5 50%, #F1F5F9 100%);

  /* Secondary Semantic Accents from Screenshots */
  --accent-aquamarine: #7FFFD4;
  --accent-aquamarine-soft: rgba(127, 255, 212, 0.25);
  --accent-emerald: #10B981;
  --accent-emerald-soft: rgba(16, 185, 129, 0.12);
  --accent-amber: #F59E0B;
  --accent-amber-soft: rgba(245, 158, 11, 0.12);
  --accent-amber-border: rgba(253, 230, 138, 0.90);
  --accent-purple: #A855F7;
  --accent-purple-soft: rgba(168, 85, 247, 0.12);
  --accent-cyan: #06B6D4;
  --accent-cyan-soft: rgba(6, 182, 212, 0.12);
  --accent-rose: #E11D48;
  --accent-rose-soft: rgba(255, 241, 242, 0.75);
  --accent-rose-border: rgba(254, 205, 211, 0.85);

  /* Typography Palette */
  --text-main: #0F172A;        /* Slate 900 / Deep Charcoal */
  --text-secondary: #334155;   /* Slate 700 */
  --text-muted: #64748B;       /* Slate 500 */
  --text-dimmed: #94A3B8;      /* Slate 400 */
  --text-white: #FFFFFF;

  /* Borders */
  --border-card: rgba(255, 255, 255, 0.90);
  --border-subtle: #E2E8F0;
  --border-light: #CBD5E1;

  /* Typography: Apple San Francisco Native Stack */
  --font-sf-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-sf-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --text-3xl: 32px;
  --text-2xl: 24px;
  --text-xl: 20px;
  --text-md: 16px;
  --text-eyebrow: 11px;

  /* Radii (Strongly Rounded System from Screenshots) */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-3xl: 32px;
  --radius-pill: 9999px;

  /* Shadows (Apple Soft Rhythm) */
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 20px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 30px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  --shadow-nav: 0 12px 40px rgba(15, 23, 42, 0.08);

  /* Transitions */
  --spring-card: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

/* ==========================================================================
   THEME PRESETS (DATA-THEME SELECTORS)
   ========================================================================== */

/* ==========================================================================
   THEME PRESETS (DATA-THEME SELECTORS) - Translucent Glass Accents
   ========================================================================== */

/* 1. Narancssárga (Orange Glass) */
[data-theme="orange"] {
  --theme-id: "orange";
  --accent-primary: rgba(249, 115, 22, 0.25);
  --accent-primary-hover: rgba(249, 115, 22, 0.42);
  --accent-primary-border: rgba(249, 115, 22, 0.65);
  --accent-primary-dark: #c2410c;
  --accent-primary-soft: rgba(249, 115, 22, 0.18);
  --accent-primary-glow: rgba(249, 115, 22, 0.25);
  --color-primary-text: #9a3412;
  --color-primary-icon: #9a3412;
  --active-pill-bg: rgba(249, 115, 22, 0.25);
  --active-pill-border: rgba(249, 115, 22, 0.65);
  --active-pill-text: #9a3412;
  --active-pill-shadow: 0 2px 10px rgba(249, 115, 22, 0.22);
  --bg-app-gradient: radial-gradient(circle at 15% 15%, rgba(249, 115, 22, 0.18) 0%, transparent 40%),
                     radial-gradient(circle at 85% 40%, rgba(251, 146, 60, 0.14) 0%, transparent 45%),
                     linear-gradient(180deg, #FFF7ED 0%, #FED7AA 35%, #F8FAFC 100%);
}

/* 2. Violet (Violet Glass) */
[data-theme="violet"] {
  --theme-id: "violet";
  --accent-primary: rgba(139, 92, 246, 0.25);
  --accent-primary-hover: rgba(139, 92, 246, 0.42);
  --accent-primary-border: rgba(139, 92, 246, 0.65);
  --accent-primary-dark: #6d28d9;
  --accent-primary-soft: rgba(139, 92, 246, 0.18);
  --accent-primary-glow: rgba(139, 92, 246, 0.25);
  --color-primary-text: #5b21b6;
  --color-primary-icon: #5b21b6;
  --active-pill-bg: rgba(139, 92, 246, 0.25);
  --active-pill-border: rgba(139, 92, 246, 0.65);
  --active-pill-text: #5b21b6;
  --active-pill-shadow: 0 2px 10px rgba(139, 92, 246, 0.22);
  --bg-app-gradient: radial-gradient(circle at 15% 15%, rgba(139, 92, 246, 0.18) 0%, transparent 40%),
                     radial-gradient(circle at 85% 40%, rgba(236, 72, 153, 0.14) 0%, transparent 45%),
                     linear-gradient(180deg, #FAF5FF 0%, #EDE9FE 50%, #F8FAFC 100%);
}

/* 3. Maroon (Bordó Glass) */
[data-theme="maroon"] {
  --theme-id: "maroon";
  --accent-primary: rgba(159, 18, 57, 0.22);
  --accent-primary-hover: rgba(159, 18, 57, 0.38);
  --accent-primary-border: rgba(159, 18, 57, 0.58);
  --accent-primary-dark: #881337;
  --accent-primary-soft: rgba(159, 18, 57, 0.16);
  --accent-primary-glow: rgba(159, 18, 57, 0.22);
  --color-primary-text: #881337;
  --color-primary-icon: #881337;
  --active-pill-bg: rgba(159, 18, 57, 0.22);
  --active-pill-border: rgba(159, 18, 57, 0.58);
  --active-pill-text: #881337;
  --active-pill-shadow: 0 2px 10px rgba(159, 18, 57, 0.22);
  --bg-app-gradient: radial-gradient(circle at 15% 15%, rgba(159, 18, 57, 0.16) 0%, transparent 40%),
                     radial-gradient(circle at 85% 40%, rgba(225, 29, 72, 0.12) 0%, transparent 45%),
                     linear-gradient(180deg, #FFF1F2 0%, #FFE4E6 50%, #F8FAFC 100%);
}

/* 4. Blue (Kék Glass) */
[data-theme="blue"], [data-theme="electric-blue"] {
  --theme-id: "blue";
  --accent-primary: rgba(14, 165, 233, 0.25);
  --accent-primary-hover: rgba(14, 165, 233, 0.42);
  --accent-primary-border: rgba(14, 165, 233, 0.65);
  --accent-primary-dark: #0369a1;
  --accent-primary-soft: rgba(14, 165, 233, 0.18);
  --accent-primary-glow: rgba(14, 165, 233, 0.25);
  --color-primary-text: #075985;
  --color-primary-icon: #075985;
  --active-pill-bg: rgba(14, 165, 233, 0.25);
  --active-pill-border: rgba(14, 165, 233, 0.65);
  --active-pill-text: #075985;
  --active-pill-shadow: 0 2px 10px rgba(14, 165, 233, 0.22);
  --bg-app-gradient: radial-gradient(circle at 15% 15%, rgba(14, 165, 233, 0.18) 0%, transparent 40%),
                     radial-gradient(circle at 85% 40%, rgba(99, 102, 241, 0.14) 0%, transparent 45%),
                     linear-gradient(180deg, #F0F9FF 0%, #E0F2FE 50%, #F8FAFC 100%);
}

/* 5. Black (Éjfekete Glass) */
[data-theme="black"], [data-theme="graphite"] {
  --theme-id: "black";
  --accent-primary: rgba(30, 41, 59, 0.22);
  --accent-primary-hover: rgba(30, 41, 59, 0.38);
  --accent-primary-border: rgba(51, 65, 85, 0.65);
  --accent-primary-dark: #020617;
  --accent-primary-soft: rgba(30, 41, 59, 0.16);
  --accent-primary-glow: rgba(15, 23, 42, 0.20);
  --color-primary-text: #0f172a;
  --color-primary-icon: #0f172a;
  --active-pill-bg: rgba(30, 41, 59, 0.22);
  --active-pill-border: rgba(51, 65, 85, 0.65);
  --active-pill-text: #0f172a;
  --active-pill-shadow: 0 2px 10px rgba(15, 23, 42, 0.20);
  --bg-app-gradient: radial-gradient(circle at 15% 15%, rgba(100, 116, 139, 0.16) 0%, transparent 40%),
                     radial-gradient(circle at 85% 40%, rgba(148, 163, 184, 0.12) 0%, transparent 45%),
                     linear-gradient(180deg, #F8FAFC 0%, #E2E8F0 50%, #F1F5F9 100%);
}

/* 6. Pink (Rózsaszín Glass) */
[data-theme="pink"] {
  --theme-id: "pink";
  --accent-primary: rgba(236, 72, 153, 0.25);
  --accent-primary-hover: rgba(236, 72, 153, 0.42);
  --accent-primary-border: rgba(236, 72, 153, 0.65);
  --accent-primary-dark: #be185d;
  --accent-primary-soft: rgba(236, 72, 153, 0.18);
  --accent-primary-glow: rgba(236, 72, 153, 0.25);
  --color-primary-text: #9d174d;
  --color-primary-icon: #9d174d;
  --active-pill-bg: rgba(236, 72, 153, 0.25);
  --active-pill-border: rgba(236, 72, 153, 0.65);
  --active-pill-text: #9d174d;
  --active-pill-shadow: 0 2px 10px rgba(236, 72, 153, 0.22);
  --bg-app-gradient: radial-gradient(circle at 15% 15%, rgba(236, 72, 153, 0.18) 0%, transparent 40%),
                     radial-gradient(circle at 85% 40%, rgba(244, 114, 182, 0.14) 0%, transparent 45%),
                     linear-gradient(180deg, #FDF2F8 0%, #FCE7F3 50%, #F8FAFC 100%);
}

/* 7. Green (Smaragdzöld Glass) */
[data-theme="green"], [data-theme="emerald"] {
  --theme-id: "green";
  --accent-primary: rgba(16, 185, 129, 0.25);
  --accent-primary-hover: rgba(16, 185, 129, 0.42);
  --accent-primary-border: rgba(16, 185, 129, 0.65);
  --accent-primary-dark: #047857;
  --accent-primary-soft: rgba(16, 185, 129, 0.18);
  --accent-primary-glow: rgba(16, 185, 129, 0.25);
  --color-primary-text: #065f46;
  --color-primary-icon: #065f46;
  --active-pill-bg: rgba(16, 185, 129, 0.25);
  --active-pill-border: rgba(16, 185, 129, 0.65);
  --active-pill-text: #065f46;
  --active-pill-shadow: 0 2px 10px rgba(16, 185, 129, 0.22);
  --bg-app-gradient: radial-gradient(circle at 15% 15%, rgba(16, 185, 129, 0.18) 0%, transparent 40%),
                     radial-gradient(circle at 85% 40%, rgba(52, 211, 153, 0.14) 0%, transparent 45%),
                     linear-gradient(180deg, #F0FDF4 0%, #DCFCE7 50%, #F8FAFC 100%);
}

/* 8. Red (Piros Glass) */
[data-theme="red"] {
  --theme-id: "red";
  --accent-primary: rgba(239, 68, 68, 0.25);
  --accent-primary-hover: rgba(239, 68, 68, 0.42);
  --accent-primary-border: rgba(239, 68, 68, 0.65);
  --accent-primary-dark: #b91c1c;
  --accent-primary-soft: rgba(239, 68, 68, 0.18);
  --accent-primary-glow: rgba(239, 68, 68, 0.25);
  --color-primary-text: #991b1b;
  --color-primary-icon: #991b1b;
  --active-pill-bg: rgba(239, 68, 68, 0.25);
  --active-pill-border: rgba(239, 68, 68, 0.65);
  --active-pill-text: #991b1b;
  --active-pill-shadow: 0 2px 10px rgba(239, 68, 68, 0.22);
  --bg-app-gradient: radial-gradient(circle at 15% 15%, rgba(239, 68, 68, 0.18) 0%, transparent 40%),
                     radial-gradient(circle at 85% 40%, rgba(248, 113, 113, 0.14) 0%, transparent 45%),
                     linear-gradient(180deg, #FEF2F2 0%, #FEE2E2 50%, #F8FAFC 100%);
}

/* 9. Yellow (Sárga Glass) */
[data-theme="yellow"] {
  --theme-id: "yellow";
  --accent-primary: rgba(234, 179, 8, 0.28);
  --accent-primary-hover: rgba(234, 179, 8, 0.45);
  --accent-primary-border: rgba(234, 179, 8, 0.70);
  --accent-primary-dark: #a16207;
  --accent-primary-soft: rgba(234, 179, 8, 0.20);
  --accent-primary-glow: rgba(234, 179, 8, 0.25);
  --color-primary-text: #854d0e;
  --color-primary-icon: #854d0e;
  --active-pill-bg: rgba(234, 179, 8, 0.28);
  --active-pill-border: rgba(234, 179, 8, 0.70);
  --active-pill-text: #854d0e;
  --active-pill-shadow: 0 2px 10px rgba(234, 179, 8, 0.22);
  --bg-app-gradient: radial-gradient(circle at 15% 15%, rgba(234, 179, 8, 0.20) 0%, transparent 40%),
                     radial-gradient(circle at 85% 40%, rgba(250, 204, 21, 0.15) 0%, transparent 45%),
                     linear-gradient(180deg, #FEFCE8 0%, #FEF08A 40%, #F8FAFC 100%);
}

/* 10. Alpha Aqua (Default) */
[data-theme="alpha-aqua"] {
  --theme-id: "alpha-aqua";
  --accent-primary: rgba(127, 255, 212, 0.28);
  --accent-primary-hover: rgba(127, 255, 212, 0.45);
  --accent-primary-border: #7FFFD4;
  --accent-primary-dark: #134e4a;
  --accent-primary-soft: rgba(127, 255, 212, 0.20);
  --accent-primary-glow: rgba(20, 184, 166, 0.20);
  --color-primary-text: #134e4a;
  --color-primary-icon: #134e4a;
  --active-pill-bg: rgba(127, 255, 212, 0.28);
  --active-pill-border: #7FFFD4;
  --active-pill-text: #134e4a;
  --active-pill-shadow: 0 1px 4px rgba(20, 184, 166, 0.15);
  --bg-app-gradient: radial-gradient(circle at 15% 15%, rgba(127, 255, 212, 0.18) 0%, transparent 40%),
                     radial-gradient(circle at 85% 40%, rgba(99, 102, 241, 0.14) 0%, transparent 45%),
                     linear-gradient(180deg, #F0F4F9 0%, #E8EEF5 50%, #F1F5F9 100%);
}