/* ============================================================
   CODERN
   Global Design Variables
   File: css/variables.css
   Version: 4.0.0

   Theme System:
   - Dark Mode = Original Codern Cyan / Blue Theme
   - Light Mode = Purple / Violet Theme
   - Dark is the default
   - Light activated with [data-theme="light"]

   Global Accent System:
   DARK
   Cyan → Blue

   LIGHT
   Purple → Violet

   Architecture:
   - Global theme variables
   - Brand variables
   - Header variables
   - Layout variables
   - Component variables
   - Responsive variables
   - Z-index system
   - Theme transitions
   ============================================================ */


/* ============================================================
   ROOT / DARK THEME
   ============================================================ */

:root {

  color-scheme: dark;


  /* ==========================================================
     BRAND COLORS — DARK
     ========================================================== */

  --brand-primary: #22d3ee;
  --brand-primary-dark: #06b6d4;
  --brand-primary-light: #67e8f9;

  --brand-secondary: #38bdf8;
  --brand-secondary-dark: #2563eb;
  --brand-secondary-light: #60a5fa;

  --brand-accent: #3b82f6;
  --brand-accent-dark: #2563eb;
  --brand-accent-light: #60a5fa;


  /* ==========================================================
     GLOBAL PRIMARY COLORS
     ========================================================== */

  --color-primary:
    var(--brand-primary);

  --color-primary-hover:
    var(--brand-primary-light);

  --color-primary-dark:
    var(--brand-primary-dark);

  --color-primary-light:
    var(--brand-primary-light);

  --color-secondary:
    var(--brand-secondary);

  --color-secondary-hover:
    var(--brand-secondary-light);

  --color-accent:
    var(--brand-accent);

  --color-accent-hover:
    var(--brand-accent-light);

  --color-on-primary:
    #031018;


  /* ==========================================================
     BACKGROUND
     ========================================================== */

  --color-background:
    #070b1d;

  --color-background-soft:
    #0a0e27;

  --color-background-elevated:
    #0d1330;

  --color-background-deep:
    #050816;

  /* Legacy compatibility */
  --color-bg:
    var(--color-background);


  /* ==========================================================
     SURFACES
     ========================================================== */

  --color-surface:
    rgba(15, 20, 48, 0.72);

  --color-surface-light:
    rgba(21, 28, 58, 0.78);

  --color-surface-hover:
    rgba(26, 33, 69, 0.86);

  --color-surface-solid:
    #10162f;

  --color-surface-elevated:
    #131a38;


  /* ==========================================================
     OVERLAYS
     ========================================================== */

  --color-overlay:
    rgba(5, 8, 22, 0.82);

  --color-overlay-heavy:
    rgba(3, 6, 18, 0.94);

  --color-overlay-light:
    rgba(255, 255, 255, 0.04);


  /* ==========================================================
     TEXT
     ========================================================== */

  --color-text-primary:
    #f8fafc;

  --color-text-secondary:
    #cbd5e1;

  --color-text-muted:
    #94a3b8;

  --color-text-subtle:
    #64748b;

  --color-text-inverse:
    #050816;

  --color-heading:
    #ffffff;

  --color-text:
    var(--color-text-primary);


  /* ==========================================================
     HEADER
     ========================================================== */

  --header-height:
    5rem;

  --header-height-mobile:
    4.25rem;

  --header-breakpoint:
    64rem;

  --header-container-max:
    80rem;

  --header-background:
    rgba(8, 11, 32, 0.88);

  --header-background-mobile:
    rgba(30, 41, 59, 0.94);

  /*
   * Smoky slate/navy glass.
   * Header remains visible while scrolling.
   */
  --header-scrolled-background:
    rgba(30, 41, 59, 0.88);

  --header-border:
    rgba(255, 255, 255, 0.12);

  --header-scrolled-border:
    rgba(255, 255, 255, 0.08);

  --header-border-active:
    rgba(34, 211, 238, 0.30);

  --header-shadow:
    0 12px 35px rgba(0, 0, 0, 0.28);

  --header-scrolled-shadow:
    0 10px 35px rgba(0, 0, 0, 0.22);

  --header-blur:
    18px;

  --header-nav-color:
    rgba(255, 255, 255, 0.74);

  --header-nav-hover:
    #ffffff;

  --header-nav-hover-color:
    #ffffff;

  --header-nav-active:
    var(--color-primary);

  --header-nav-gap:
    1.75rem;

  --header-nav-underline-height:
    2px;

  --header-nav-underline-offset:
    5px;


  /* ==========================================================
     HEADER CTA — DARK
     ========================================================== */

  --header-cta-height:
    2.75rem;

  --header-cta-padding-x:
    1.25rem;

  --header-cta-background:
    linear-gradient(
      135deg,
      #22d3ee 0%,
      #38bdf8 100%
    );

  --header-cta-background-hover:
    linear-gradient(
      135deg,
      #67e8f9 0%,
      #38bdf8 100%
    );

  --header-cta-color:
    #031018;

  --header-cta-border:
    rgba(34, 211, 238, 0.50);

  --header-cta-shadow:
    0 10px 24px rgba(34, 211, 238, 0.16);

  --header-cta-shadow-hover:
    0 14px 32px rgba(34, 211, 238, 0.28);


  /* ==========================================================
     HEADER LOGO
     ========================================================== */

  --header-logo-height:
    2.5rem;

  --header-logo-height-mobile:
    2.25rem;

  --header-logo-gap:
    0.75rem;

  --header-logo-text-size:
    1.25rem;

  --header-logo-text-size-mobile:
    1.0625rem;


  /* ==========================================================
     MOBILE MENU BUTTON
     ========================================================== */

  --mobile-menu-size:
    2.625rem;

  --mobile-menu-button-size:
    2.625rem;

  --mobile-menu-radius:
    0.5rem;

  --mobile-menu-background:
    rgba(255, 255, 255, 0.04);

  --mobile-menu-background-hover:
    rgba(255, 255, 255, 0.08);

  --mobile-menu-border:
    rgba(255, 255, 255, 0.10);

  --mobile-menu-border-hover:
    rgba(34, 211, 238, 0.30);

  --mobile-menu-color:
    #ffffff;


  /* ==========================================================
     MOBILE NAVIGATION
     ========================================================== */

  --mobile-navigation-top:
    4.75rem;

  --mobile-navigation-background:
    rgba(13, 19, 48, 0.96);

  --mobile-navigation-border:
    rgba(255, 255, 255, 0.12);

  --mobile-navigation-radius:
    1rem;

  --mobile-navigation-padding:
    1.5rem;

  --mobile-navigation-shadow:
    0 25px 60px rgba(0, 0, 0, 0.30);

  --mobile-navigation-blur:
    24px;

  --mobile-navigation-divider:
    rgba(255, 255, 255, 0.10);

  --mobile-nav-padding-x:
    0.75rem;

  --mobile-nav-padding-y:
    0.875rem;

  --mobile-nav-radius:
    0.75rem;

  --mobile-nav-color:
    rgba(255, 255, 255, 0.80);

  --mobile-nav-hover-color:
    #ffffff;

  --mobile-nav-hover-background:
    rgba(255, 255, 255, 0.05);

  --mobile-nav-active-color:
    var(--color-primary);

  --mobile-nav-active-background:
    rgba(34, 211, 238, 0.10);

  --mobile-nav-indicator-size:
    0.375rem;

  --mobile-nav-indicator-shadow:
    0 0 12px rgba(34, 211, 238, 0.50);


  /* ==========================================================
     MOBILE BACKDROP
     ========================================================== */

  --mobile-backdrop-background:
    rgba(0, 0, 0, 0.60);

  --mobile-backdrop-blur:
    8px;


  /* ==========================================================
     BORDERS
     ========================================================== */

  --color-border:
    rgba(148, 163, 184, 0.16);

  --color-border-light:
    rgba(255, 255, 255, 0.08);

  --color-border-medium:
    rgba(255, 255, 255, 0.14);

  --color-border-strong:
    rgba(255, 255, 255, 0.22);

  --color-border-focus:
    var(--color-primary);


  /* ==========================================================
     STATUS COLORS
     ========================================================== */

  --color-success:
    #22c55e;

  --color-success-soft:
    rgba(34, 197, 94, 0.12);

  --color-warning:
    #f59e0b;

  --color-warning-soft:
    rgba(245, 158, 11, 0.12);

  --color-error:
    #ef4444;

  --color-error-soft:
    rgba(239, 68, 68, 0.12);

  --color-info:
    #38bdf8;

  --color-info-soft:
    rgba(56, 189, 248, 0.12);


  /* ==========================================================
     GLOBAL GRADIENTS — DARK
     ========================================================== */

  --gradient-primary:
    linear-gradient(
      135deg,
      #22d3ee 0%,
      #38bdf8 100%
    );

  --gradient-brand:
    linear-gradient(
      135deg,
      #22d3ee 0%,
      #38bdf8 55%,
      #3b82f6 100%
    );

  --gradient-accent:
    linear-gradient(
      135deg,
      #38bdf8 0%,
      #3b82f6 100%
    );

  --gradient-cyan:
    linear-gradient(
      135deg,
      #06b6d4 0%,
      #22d3ee 100%
    );

  --gradient-blue:
    linear-gradient(
      135deg,
      #2563eb 0%,
      #3b82f6 100%
    );


  /* ==========================================================
     DARK GRADIENTS
     ========================================================== */

  --gradient-dark:
    linear-gradient(
      180deg,
      #050816 0%,
      #0a0e27 100%
    );

  --gradient-dark-soft:
    linear-gradient(
      180deg,
      #070b1d 0%,
      #0d1330 100%
    );


  /* ==========================================================
     SURFACE GRADIENT
     ========================================================== */

  --gradient-surface:
    linear-gradient(
      145deg,
      rgba(34, 211, 238, 0.08),
      rgba(56, 189, 248, 0.05),
      rgba(59, 130, 246, 0.04)
    );


  /* ==========================================================
     GLOBAL GLOW — DARK
     ========================================================== */

  --gradient-glow:
    radial-gradient(
      circle at center,
      rgba(34, 211, 238, 0.20),
      rgba(56, 189, 248, 0.10) 38%,
      rgba(59, 130, 246, 0.06) 55%,
      transparent 74%
    );

  --glow-primary:
    rgba(34, 211, 238, 0.30);

  --glow-primary-strong:
    rgba(34, 211, 238, 0.48);

  --glow-secondary:
    rgba(56, 189, 248, 0.25);

  --glow-accent:
    rgba(59, 130, 246, 0.25);


  /* ==========================================================
     TYPOGRAPHY
     ========================================================== */

  --font-primary:
    Inter,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  --font-heading:
    Inter,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  --font-mono:
    "JetBrains Mono",
    "Fira Code",
    Consolas,
    Monaco,
    monospace;


  /* ==========================================================
     FONT WEIGHTS
     ========================================================== */

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;


  /* ==========================================================
     FONT SIZES
     ========================================================== */

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  --font-size-8xl: 6rem;


  /* ==========================================================
     HEADINGS
     ========================================================== */

  --heading-hero:
    clamp(3rem, 8vw, 7rem);

  --heading-h1:
    clamp(2.5rem, 6vw, 5rem);

  --heading-h2:
    clamp(2rem, 4vw, 3.5rem);

  --heading-h3:
    clamp(1.5rem, 3vw, 2.25rem);

  --heading-h4:
    clamp(1.25rem, 2vw, 1.5rem);


  /* ==========================================================
     LINE HEIGHT
     ========================================================== */

  --line-height-none: 1;
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --line-height-loose: 2;


  /* ==========================================================
     LETTER SPACING
     ========================================================== */

  --tracking-tighter: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;


  /* ==========================================================
     SPACING
     ========================================================== */

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;


  /* ==========================================================
     SECTION SPACING
     ========================================================== */

  --section-padding-y:
    clamp(5rem, 10vw, 9rem);

  --section-padding-y-sm:
    clamp(3rem, 7vw, 5rem);

  --section-padding-y-lg:
    clamp(7rem, 13vw, 12rem);

  --section-padding-y-mobile:
    4.5rem;

  --section-padding-y-mobile-sm:
    3rem;

  --section-padding-y-mobile-lg:
    6rem;

  --section-padding-x:
    clamp(1rem, 4vw, 3rem);

  --section-gap:
    clamp(3rem, 6vw, 6rem);


  /* ==========================================================
     CONTAINER
     ========================================================== */

  --container-xs:
    30rem;

  --container-sm:
    40rem;

  --container-md:
    48rem;

  --container-lg:
    64rem;

  --container-xl:
    75rem;

  --container-2xl:
    87.5rem;

  --container-max:
    90rem;

  /* Compatibility names used by layout.css */

  --container-max-width:
    var(--container-max);

  --container-max-width-sm:
    var(--container-sm);

  --container-max-width-md:
    var(--container-md);

  --container-max-width-lg:
    var(--container-lg);

  --container-padding:
    clamp(1rem, 4vw, 3rem);

  --container-padding-tablet:
    2rem;

  --container-padding-mobile:
    1.25rem;

  --container-padding-small:
    1rem;


  /* ==========================================================
     LAYOUT
     ========================================================== */

  --layout-gap:
    clamp(2rem, 5vw, 4rem);

  --sidebar-width:
    18rem;


  /* ==========================================================
     RADIUS
     ========================================================== */

  --radius-none: 0;
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;


  /* ==========================================================
     BORDER WIDTH
     ========================================================== */

  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;


  /* ==========================================================
     SHADOWS
     ========================================================== */

  --shadow-xs:
    0 1px 2px rgba(0, 0, 0, 0.12);

  --shadow-sm:
    0 4px 12px rgba(0, 0, 0, 0.16);

  --shadow-md:
    0 10px 30px rgba(0, 0, 0, 0.22);

  --shadow-lg:
    0 20px 50px rgba(0, 0, 0, 0.28);

  --shadow-xl:
    0 30px 80px rgba(0, 0, 0, 0.35);


  /* ==========================================================
     BRAND GLOW SHADOWS — DARK
     ========================================================== */

  --shadow-glow-primary:
    0 0 40px rgba(34, 211, 238, 0.22);

  --shadow-glow-secondary:
    0 0 40px rgba(56, 189, 248, 0.18);

  --shadow-glow-brand:
    0 0 60px rgba(34, 211, 238, 0.18);

  --shadow-button:
    0 8px 22px rgba(34, 211, 238, 0.18);

  --shadow-button-hover:
    0 12px 30px rgba(34, 211, 238, 0.28);


  /* ==========================================================
     BLUR
     ========================================================== */

  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;


  /* ==========================================================
     TRANSITIONS
     ========================================================== */

  --transition-fast:
    150ms ease;

  --transition-base:
    250ms ease;

  --transition-medium:
    350ms ease;

  --transition-slow:
    500ms ease;

  --transition-slower:
    800ms ease;

  --transition-transform:
    transform 350ms cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  --transition-smooth:
    all 350ms cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );


  /* ==========================================================
     BUTTONS
     ========================================================== */

  --button-height-sm:
    2.5rem;

  --button-height-md:
    3rem;

  --button-height-lg:
    3.5rem;

  --button-height-xl:
    4rem;

  --button-padding-x:
    1.5rem;

  --button-padding-x-lg:
    2rem;

  --button-radius:
    var(--radius-full);


  /* ==========================================================
     CARDS
     ========================================================== */

  --card-background:
    rgba(15, 20, 48, 0.72);

  --card-background-hover:
    rgba(26, 33, 69, 0.82);

  --card-border:
    rgba(255, 255, 255, 0.08);

  --card-radius:
    var(--radius-2xl);

  --card-padding:
    clamp(1.25rem, 3vw, 2rem);


  /* ==========================================================
     FORMS
     ========================================================== */

  --input-height:
    3.25rem;

  --input-background:
    rgba(255, 255, 255, 0.04);

  --input-background-focus:
    rgba(255, 255, 255, 0.06);

  --input-border:
    rgba(255, 255, 255, 0.12);

  --input-border-focus:
    var(--color-primary);

  --input-radius:
    var(--radius-lg);

  --input-padding-x:
    1rem;


  /* ==========================================================
     GRID
     ========================================================== */

  --grid-gap-xs: 0.75rem;
  --grid-gap-sm: 1rem;
  --grid-gap-md: 1.5rem;
  --grid-gap-lg: 2rem;
  --grid-gap-xl: 3rem;


  /* ==========================================================
     ICONS
     ========================================================== */

  --icon-xs: 0.875rem;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-xl: 2rem;
  --icon-2xl: 3rem;
  --icon-3xl: 4rem;


  /* ==========================================================
     IMAGES
     ========================================================== */

  --image-radius:
    var(--radius-xl);

  --image-overlay:
    linear-gradient(
      180deg,
      transparent 35%,
      rgba(5, 8, 22, 0.88) 100%
    );


  /* ==========================================================
     CURSOR
     ========================================================== */

  --cursor-size:
    0.5rem;

  --cursor-ring-size:
    2.25rem;

  --cursor-ring-border:
    1px;

  --cursor-color:
    var(--color-primary);


  /* ==========================================================
     MOTION
     ========================================================== */

  --motion-distance-sm: 10px;
  --motion-distance-md: 24px;
  --motion-distance-lg: 50px;

  --motion-duration-fast: 300ms;
  --motion-duration-base: 600ms;
  --motion-duration-slow: 1000ms;


  /* ==========================================================
     ACCESSIBILITY
     ========================================================== */

  --focus-ring-width:
    3px;

  --focus-ring-offset:
    3px;

  --focus-ring:
    0 0 0 var(--focus-ring-offset)
    var(--color-background),
    0 0 0 calc(
      var(--focus-ring-offset) +
      var(--focus-ring-width)
    )
    var(--color-primary);


  /* ==========================================================
     Z-INDEX
     ========================================================== */

  --z-base: 1;
  --z-header: 1000;
  --z-dropdown: 1100;
  --z-sticky: 1200;
  --z-fixed: 1300;
  --z-modal: 5000;
  --z-popover: 6000;
  --z-tooltip: 7000;
  --z-loading: 9999;


  /* ==========================================================
     BREAKPOINTS
     ========================================================== */

  --breakpoint-xs: 30rem;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 75rem;
  --breakpoint-2xl: 87.5rem;


  /* ==========================================================
     ASPECT RATIOS
     ========================================================== */

  --ratio-square: 1 / 1;
  --ratio-video: 16 / 9;
  --ratio-wide: 21 / 9;
  --ratio-portrait: 4 / 5;


  /* ==========================================================
     OPACITY
     ========================================================== */

  --opacity-disabled: 0.45;
  --opacity-muted: 0.65;
  --opacity-overlay: 0.80;
  --opacity-heavy: 0.92;


  /* ==========================================================
     BACKDROP
     ========================================================== */

  --backdrop-header:
    blur(var(--header-blur))
    saturate(140%);

  --backdrop-card:
    blur(12px)
    saturate(120%);


  /* ==========================================================
     SELECTION
     ========================================================== */

  --selection-background:
    var(--color-primary);

  --selection-text:
    #031018;


  /* ==========================================================
     THEME TRANSITION
     ========================================================== */

  --theme-transition-duration:
    300ms;

  --theme-transition-easing:
    ease;

  --theme-transition:
    background-color 300ms ease,
    color 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease,
    opacity 300ms ease;
}


/* ============================================================
   LIGHT THEME
   ============================================================ */

[data-theme="light"] {

  color-scheme: light;


  /* ==========================================================
     BRAND COLORS — LIGHT
     ========================================================== */

  /*
   * Global light-mode accent:
   * Purple → Violet
   */

  --brand-primary:
    #8b5cf6;

  --brand-primary-dark:
    #7c3aed;

  --brand-primary-light:
    #a78bfa;

  --brand-secondary:
    #a855f7;

  --brand-secondary-dark:
    #9333ea;

  --brand-secondary-light:
    #c084fc;

  --brand-accent:
    #7c3aed;

  --brand-accent-dark:
    #6d28d9;

  --brand-accent-light:
    #8b5cf6;


  /* ==========================================================
     GLOBAL PRIMARY COLORS — LIGHT
     ========================================================== */

  --color-primary:
    var(--brand-primary);

  --color-primary-hover:
    var(--brand-primary-light);

  --color-primary-dark:
    var(--brand-primary-dark);

  --color-primary-light:
    var(--brand-primary-light);

  --color-secondary:
    var(--brand-secondary);

  --color-secondary-hover:
    var(--brand-secondary-light);

  --color-accent:
    var(--brand-accent);

  --color-accent-hover:
    var(--brand-accent-light);

  --color-on-primary:
    #ffffff;


  /* ==========================================================
     BACKGROUND
     ========================================================== */

  --color-background:
    #f8fafc;

  --color-background-soft:
    #ffffff;

  --color-background-elevated:
    #f1f5f9;

  --color-background-deep:
    #e2e8f0;

  --color-bg:
    var(--color-background);


  /* ==========================================================
     SURFACES
     ========================================================== */

  --color-surface:
    rgba(255, 255, 255, 0.78);

  --color-surface-light:
    rgba(255, 255, 255, 0.92);

  --color-surface-hover:
    rgba(241, 245, 249, 0.96);

  --color-surface-solid:
    #ffffff;

  --color-surface-elevated:
    #f8fafc;


  /* ==========================================================
     OVERLAYS
     ========================================================== */

  --color-overlay:
    rgba(15, 23, 42, 0.35);

  --color-overlay-heavy:
    rgba(15, 23, 42, 0.72);

  --color-overlay-light:
    rgba(15, 23, 42, 0.035);


  /* ==========================================================
     TEXT
     ========================================================== */

  --color-text-primary:
    #0f172a;

  --color-text-secondary:
    #334155;

  --color-text-muted:
    #64748b;

  --color-text-subtle:
    #94a3b8;

  --color-text-inverse:
    #ffffff;

  --color-heading:
    #020617;

  --color-text:
    var(--color-text-primary);


  /* ==========================================================
     HEADER — LIGHT
     ========================================================== */

  --header-background:
    rgba(255, 255, 255, 0.82);

  --header-background-mobile:
    rgba(255, 255, 255, 0.97);

  --header-scrolled-background:
    rgba(248, 250, 252, 0.94);

  --header-border:
    rgba(15, 23, 42, 0.10);

  --header-scrolled-border:
    rgba(15, 23, 42, 0.10);

  --header-border-active:
    rgba(124, 58, 237, 0.25);

  --header-shadow:
    0 12px 35px rgba(15, 23, 42, 0.10);

  --header-scrolled-shadow:
    0 10px 35px rgba(15, 23, 42, 0.12);

  --header-nav-color:
    rgba(15, 23, 42, 0.72);

  --header-nav-hover:
    #020617;

  --header-nav-hover-color:
    #020617;

  --header-nav-active:
    var(--color-primary);


  /* ==========================================================
     HEADER CTA — LIGHT
     ========================================================== */

  /*
   * Dark mode:
   * Cyan → Blue
   *
   * Light mode:
   * Purple → Violet
   */

  --header-cta-background:
    linear-gradient(
      135deg,
      #8b5cf6 0%,
      #a855f7 100%
    );

  --header-cta-background-hover:
    linear-gradient(
      135deg,
      #a78bfa 0%,
      #c084fc 100%
    );

  --header-cta-color:
    #ffffff;

  --header-cta-border:
    rgba(139, 92, 246, 0.45);

  --header-cta-shadow:
    0 10px 24px rgba(139, 92, 246, 0.18);

  --header-cta-shadow-hover:
    0 14px 32px rgba(139, 92, 246, 0.28);


  /* ==========================================================
     MOBILE MENU — LIGHT
     ========================================================== */

  --mobile-menu-background:
    rgba(15, 23, 42, 0.04);

  --mobile-menu-background-hover:
    rgba(15, 23, 42, 0.08);

  --mobile-menu-border:
    rgba(15, 23, 42, 0.12);

  --mobile-menu-border-hover:
    rgba(139, 92, 246, 0.35);

  --mobile-menu-color:
    #0f172a;


  /* ==========================================================
     MOBILE NAVIGATION — LIGHT
     ========================================================== */

  --mobile-navigation-background:
    rgba(255, 255, 255, 0.97);

  --mobile-navigation-border:
    rgba(15, 23, 42, 0.10);

  --mobile-navigation-shadow:
    0 25px 60px rgba(15, 23, 42, 0.18);

  --mobile-navigation-divider:
    rgba(15, 23, 42, 0.08);

  --mobile-nav-color:
    rgba(15, 23, 42, 0.78);

  --mobile-nav-hover-color:
    #020617;

  --mobile-nav-hover-background:
    rgba(139, 92, 246, 0.06);

  --mobile-nav-active-color:
    var(--color-primary);

  --mobile-nav-active-background:
    rgba(139, 92, 246, 0.10);

  --mobile-nav-indicator-shadow:
    0 0 12px rgba(139, 92, 246, 0.38);


  /* ==========================================================
     MOBILE BACKDROP — LIGHT
     ========================================================== */

  --mobile-backdrop-background:
    rgba(15, 23, 42, 0.45);


  /* ==========================================================
     BORDERS — LIGHT
     ========================================================== */

  --color-border:
    rgba(15, 23, 42, 0.10);

  --color-border-light:
    rgba(15, 23, 42, 0.06);

  --color-border-medium:
    rgba(15, 23, 42, 0.12);

  --color-border-strong:
    rgba(15, 23, 42, 0.20);

  --color-border-focus:
    var(--color-primary);


  /* ==========================================================
     STATUS COLORS — LIGHT
     ========================================================== */

  --color-info:
    #8b5cf6;

  --color-info-soft:
    rgba(139, 92, 246, 0.10);


  /* ==========================================================
     GLOBAL GRADIENTS — LIGHT
     ========================================================== */

  --gradient-primary:
    linear-gradient(
      135deg,
      #8b5cf6 0%,
      #a855f7 100%
    );

  --gradient-brand:
    linear-gradient(
      135deg,
      #8b5cf6 0%,
      #a855f7 55%,
      #c084fc 100%
    );

  --gradient-accent:
    linear-gradient(
      135deg,
      #7c3aed 0%,
      #a855f7 100%
    );

  --gradient-cyan:
    linear-gradient(
      135deg,
      #7c3aed 0%,
      #8b5cf6 100%
    );

  --gradient-blue:
    linear-gradient(
      135deg,
      #7c3aed 0%,
      #a855f7 100%
    );


  /* ==========================================================
     LIGHT SURFACE GRADIENT
     ========================================================== */

  --gradient-surface:
    linear-gradient(
      145deg,
      rgba(139, 92, 246, 0.08),
      rgba(168, 85, 247, 0.05),
      rgba(192, 132, 252, 0.04)
    );


  /* ==========================================================
     GLOBAL GLOW — LIGHT
     ========================================================== */

  --gradient-glow:
    radial-gradient(
      circle at center,
      rgba(139, 92, 246, 0.18),
      rgba(168, 85, 247, 0.10) 38%,
      rgba(192, 132, 252, 0.06) 55%,
      transparent 74%
    );

  --glow-primary:
    rgba(139, 92, 246, 0.26);

  --glow-primary-strong:
    rgba(139, 92, 246, 0.42);

  --glow-secondary:
    rgba(168, 85, 247, 0.22);

  --glow-accent:
    rgba(124, 58, 237, 0.22);


  /* ==========================================================
     CARDS — LIGHT
     ========================================================== */

  --card-background:
    rgba(255, 255, 255, 0.82);

  --card-background-hover:
    #ffffff;

  --card-border:
    rgba(15, 23, 42, 0.09);


  /* ==========================================================
     FORMS — LIGHT
     ========================================================== */

  --input-background:
    rgba(255, 255, 255, 0.92);

  --input-background-focus:
    #ffffff;

  --input-border:
    rgba(15, 23, 42, 0.14);

  --input-border-focus:
    var(--color-primary);


  /* ==========================================================
     SHADOWS — LIGHT
     ========================================================== */

  --shadow-xs:
    0 1px 2px rgba(15, 23, 42, 0.06);

  --shadow-sm:
    0 4px 12px rgba(15, 23, 42, 0.08);

  --shadow-md:
    0 10px 30px rgba(15, 23, 42, 0.10);

  --shadow-lg:
    0 20px 50px rgba(15, 23, 42, 0.12);

  --shadow-xl:
    0 30px 80px rgba(15, 23, 42, 0.15);


  /* ==========================================================
     BRAND GLOW SHADOWS — LIGHT
     ========================================================== */

  --shadow-glow-primary:
    0 0 40px rgba(139, 92, 246, 0.18);

  --shadow-glow-secondary:
    0 0 40px rgba(168, 85, 247, 0.16);

  --shadow-glow-brand:
    0 0 60px rgba(139, 92, 246, 0.16);

  --shadow-button:
    0 8px 22px rgba(139, 92, 246, 0.16);

  --shadow-button-hover:
    0 12px 30px rgba(139, 92, 246, 0.26);


  /* ==========================================================
     IMAGE OVERLAY — LIGHT
     ========================================================== */

  --image-overlay:
    linear-gradient(
      180deg,
      transparent 35%,
      rgba(15, 23, 42, 0.70) 100%
    );


  /* ==========================================================
     CURSOR — LIGHT
     ========================================================== */

  --cursor-color:
    var(--color-primary);


  /* ==========================================================
     FOCUS RING — LIGHT
     ========================================================== */

  --focus-ring:
    0 0 0 var(--focus-ring-offset)
    var(--color-background),
    0 0 0 calc(
      var(--focus-ring-offset) +
      var(--focus-ring-width)
    )
    var(--color-primary);


  /* ==========================================================
     SELECTION — LIGHT
     ========================================================== */

  --selection-background:
    var(--color-primary);

  --selection-text:
    #ffffff;
}


/* ============================================================
   EXPLICIT DARK THEME
   ============================================================ */

[data-theme="dark"] {

  color-scheme: dark;

}


/* ============================================================
   HTML / BODY
   ============================================================ */

html {

  background-color:
    var(--color-background);

  transition:
    background-color
      var(--theme-transition-duration)
      var(--theme-transition-easing);

}


body {

  background-color:
    var(--color-background);

  color:
    var(--color-text);

  transition:
    var(--theme-transition);

}


/* ============================================================
   TEXT SELECTION
   ============================================================ */

::selection {

  background:
    var(--selection-background);

  color:
    var(--selection-text);

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  :root {

    --transition-fast: none;
    --transition-base: none;
    --transition-medium: none;
    --transition-slow: none;
    --transition-slower: none;

    --transition-transform: none;
    --transition-smooth: none;

    --theme-transition: none;

  }


  html,
  body {

    transition:
      none;

  }

}