/* =================================
   Color Tokens – Light Theme (Default)
==================================== */
:root {
   /* ---------------------------------
       Brand & Accents
    ---------------------------------- */
   --color-accent-primary: #8A2BE2;
   --color-accent-secondary: #FF4500;
   --color-accent-tertiary: #FFA500;
   --color-accent-blue: #007bff;

   /* ---------------------------------
       Text
    ---------------------------------- */
   --color-text-main: #0f0f0f;
   --color-text-soft: #555555;
   --color-text-muted: #888888;
   --color-text-on-accent: #ffffff;

   /* ---------------------------------
       Surfaces
    ---------------------------------- */
   --color-surface-1: #ffffff;
   --color-surface-2: #efe7fb;
   --color-surface-3: rgba(255, 255, 255, 0.6);
   --color-surface-footer: #26272b;

   /* ---------------------------------
       Controls
    ---------------------------------- */
   --color-control-bg: #f0f0f0;
   --color-chip-bg: #f0f7ff;

   /* ---------------------------------
       Borders
    ---------------------------------- */
   --color-border-soft: #eeeeee;
   --color-border-medium: #cccccc;
   --color-border-strong: #333333;
   --color-border-subtle: #e2e8f0;

   /* ---------------------------------
       Navbar
    ---------------------------------- */
   --color-nav-bg: rgba(67, 51, 91, 0.5);
   --color-nav-fg: #0f172a;
   --color-nav-muted: #475569;
   --color-nav-ring: #e2e8f0;

   /* ---------------------------------
       Footer
    ---------------------------------- */
   --color-footer-text: #a9a9a9;
   --color-footer-muted: #737373;
   --color-footer-heading: #ffffff;

   /* ---------------------------------
       Shadows
    ---------------------------------- */
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);

   /* Extra extracted shadows */
   --shadow-outset-strong: 0 2px 4px rgba(0, 0, 0, 1);

   /* ---------------------------------
       Gradients
    ---------------------------------- */
   --gradient-accent: linear-gradient(90deg, #8A2BE2 30%, #FF4500 70%, #FFA500);
   --gradient-soft: linear-gradient(135deg,
         rgba(237, 221, 255, 0.4),
         rgba(255, 226, 211, 0.4),
         rgba(254, 238, 209, 0.4));

   /* Hard accent gradients */
   --gradient-accent-hard: linear-gradient(90deg,
         #6A00FF 0%,
         #8A2BE2 30%,
         #FF2D55 60%,
         #FF9F0A 100%);

   --gradient-accent-electric: linear-gradient(120deg,
         #00C6FF 0%,
         #0072FF 35%,
         #8A2BE2 70%,
         #FF00CC 100%);

   /* Darker / punchier background gradients */
   --gradient-deep-warm: linear-gradient(135deg,
         rgba(138, 43, 226, 0.85),
         rgba(255, 69, 0, 0.85),
         rgba(255, 165, 0, 0.85));

   --gradient-deep-cool: linear-gradient(135deg,
         rgba(0, 114, 255, 0.9),
         rgba(0, 198, 255, 0.9),
         rgba(106, 0, 255, 0.9));

   /* Sharp contrast / edge highlights */
   --gradient-strike: linear-gradient(90deg,
         #000000 0%,
         #8A2BE2 40%,
         #FF4500 60%,
         #FFFFFF 100%);

   /* Glassy but more intense */
   --gradient-glass-hard: linear-gradient(135deg,
         rgba(255, 255, 255, 0.25),
         rgba(138, 43, 226, 0.35),
         rgba(255, 69, 0, 0.35));


   /* ---------------------------------
       Masks
    ---------------------------------- */
   --color-mask-foreground: #ffffff;
   --color-mask-background: transparent;

   /* ---------------------------------
       Extracted Overlays
    ---------------------------------- */
   --overlay-dark-50: rgba(15, 23, 42, 0.50);
   --overlay-dark-75: rgba(15, 23, 42, 0.75);

   /* ---------------------------------
       Story Card Pastel Tokens (merged)
    ---------------------------------- */
   --story-card-purple-tint: #e0c8de;
   /* purple-pink group */
   --story-card-orange-tint: #ffd7bc;
   /* orange-peach group */

   /* ---------------------------------
       Success Card Tokens
    ---------------------------------- */
   --color-success-border: #56ab2f;
   --color-success-glow: #a8e063;
   --color-success-gradient-start: #f7ffec;
   --color-success-gradient-end: #c3ffa8;

   /* ---------------------------------
       Control Translucent Tokens
    ---------------------------------- */
   --control-bg-translucent: rgba(255, 255, 255, 0.5);
   --control-border-light: rgba(0, 0, 0, 0.1);
}

/* =================================
   Color Tokens – Dark Theme
   (Adjusted for Contrast)
==================================== */
[data-theme="dark"] {
   /* ---------------------------------
       Text
    ---------------------------------- */
   --color-text-main: #ececec;
   --color-text-soft: #d4d4d8;
   --color-text-muted: #a1a1aa;
   --color-text-on-accent: #000000;

   /* ---------------------------------
       Surfaces
    ---------------------------------- */
   --color-surface-1: #09090b;
   --color-surface-2: #18181b;
   --color-surface-3: #27272a;
   /* --color-surface-footer: #000000; */
   --color-surface-footer: #26272b;

   /* ---------------------------------
       Controls
    ---------------------------------- */
   --color-control-bg: #3f3f46;
   --color-chip-bg: #27272a;

   /* Story card tints (dark adjusted) */
   --story-card-purple-tint: rgba(192, 132, 252, 0.20);
   --story-card-orange-tint: rgba(251, 146, 60, 0.20);

   /* ---------------------------------
       Borders
    ---------------------------------- */
   --color-border-soft: #27272a;
   --color-border-medium: #3f3f46;
   --color-border-strong: #52525b;
   --color-border-subtle: #18181b;

   /* ---------------------------------
       Brand & Accents
    ---------------------------------- */
   --color-accent-primary: #c084fc;
   --color-accent-secondary: #fb923c;
   --color-accent-tertiary: #fcd34d;
   --color-accent-blue: #60a5fa;

   /* ---------------------------------
       Navbar
    ---------------------------------- */
   --color-nav-bg: rgba(231, 231, 231, 0.1);
   --color-nav-fg: #fafafa;
   --color-nav-muted: #a1a1aa;
   --color-nav-ring: #27272a;

   /* ---------------------------------
       Footer
    ---------------------------------- */
   --color-footer-text: #a1a1aa;
   --color-footer-muted: #737373;
   --color-footer-heading: #ececec;

   /* ---------------------------------
       Shadows
    ---------------------------------- */
   --shadow-sm: 0 0 0 1px #27272a, 0 2px 4px rgba(0, 0, 0, 0.4);
   --shadow-md: 0 0 0 1px #27272a, 0 6px 12px rgba(0, 0, 0, 0.5);
   --shadow-lg: 0 0 0 1px #27272a, 0 12px 24px rgba(0, 0, 0, 0.6);

   /* ---------------------------------
       Gradients
    ---------------------------------- */
   --gradient-accent: linear-gradient(90deg, #c084fc, #fb923c, #fcd34d);
   --gradient-soft: radial-gradient(circle at top left,
         rgba(192, 132, 252, 0.15),
         transparent 60%), radial-gradient(circle at bottom right,
         rgba(251, 146, 60, 0.12),
         transparent 60%);

   /* ---------------------------------
       Masks
    ---------------------------------- */
   --color-mask-foreground: #000000;
   --color-mask-background: transparent;

   /* ---------------------------------
       Extracted Overlays
    ---------------------------------- */
   --overlay-dark-50: rgba(15, 23, 42, 0.55);
   --overlay-dark-75: rgba(15, 23, 42, 0.85);

   /* ---------------------------------
       Success Card Tokens (dark mode)
    ---------------------------------- */
   --color-success-border: #86efac;
   --color-success-glow: #bbf7d0;
   --color-success-gradient-start: #1a2e1a;
   --color-success-gradient-end: #274b22;

   /* ---------------------------------
       Control Translucent Tokens
    ---------------------------------- */
   --control-bg-translucent: rgba(255, 255, 255, 0.10);
   --control-border-light: rgba(255, 255, 255, 0.10);
}

/* Global Theme Transition Class */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
   transition: all 2s ease !important;
   transition-delay: 0s !important;
}