/* ══════════════════════════════════════════════════════════════════
   REFLEXBENCH · MASTER THEME SYSTEM (theme.css)
   Centralized Design System, Aesthetic Presets & Style Tokens
   
   Edit this single file to change the site's styling, coloring,
   fonts, button styling, card borders, and overall aesthetic instantly!
   ══════════════════════════════════════════════════════════════════ */

/* ─── 1. BASE DESIGN TOKENS (ILOVEWIDGETS.COM TECHNICAL AESTHETIC) ─── */
:root {
  /* Typography — Clean Proportional Body & Geometric Headings, Monospace for Data */
  --theme-font-heading:           'Manrope', 'Lexend', system-ui, -apple-system, sans-serif;
  --theme-font-body:              'Lexend', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --theme-font-mono:              'Roboto Mono', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --theme-font-weight-normal:     400;
  --theme-font-weight-medium:     500;
  --theme-font-weight-bold:       700;
  --theme-font-weight-extrabold:  800;

  /* Button Aesthetics — Crisp 6px Radius, Uppercase Tracked */
  --theme-btn-radius:             6px;
  --theme-btn-padding-y:          0.625rem;
  --theme-btn-padding-x:          1.25rem;
  --theme-btn-font-weight:        700;
  --theme-btn-letter-spacing:     0.06em;
  --theme-btn-text-transform:     uppercase;
  --theme-btn-hover-transform:    translateY(-1px);
  --theme-btn-active-transform:   translateY(0px);
  --theme-btn-transition:         all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  /* Card & Panel Aesthetics — Translucent Glass, 1px Border, 10px Radius */
  --theme-card-radius:            10px;
  --theme-card-border-width:      1px;
  --theme-card-border-style:      solid;
  --theme-card-shadow:            0 4px 20px rgba(0, 0, 0, 0.4);
  --theme-card-hover-shadow:      0 10px 30px -5px rgba(255, 208, 51, 0.2);
  --theme-card-hover-lift:        translateY(-3px);

  /* Radius Scales */
  --theme-radius-sm:              4px;
  --theme-radius-md:              6px;
  --theme-radius-lg:              10px;
  --theme-radius-xl:              14px;
  --theme-radius-full:            9999px;

  /* Transitions */
  --theme-transition-fast:        0.15s ease;
  --theme-transition-base:        0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --theme-transition-smooth:      0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── 2. LIGHT MODE PALETTE ─────────────────────────────────────── */
:root,
html.light {
  color-scheme: light;

  /* Surfaces & Backgrounds */
  --theme-bg:                     #f5f7fb;
  --theme-surface:                #ffffff;
  --theme-surface-bright:         #ffffff;
  --theme-surface-dim:            #edf0f4;
  --theme-surface-variant:        #e2e6ed;
  --theme-inverse-surface:        #0a0f1d;
  --theme-inverse-on-surface:     #ffffff;

  /* Text & Content */
  --theme-text:                   #1e293b;
  --theme-text-muted:             #64748b;
  --theme-text-faint:             #94a3b8;

  /* Brand / Primary — Deep Navy/Slate CTA on Light (matching main branch) */
  --theme-primary:                #1e293b;
  --theme-on-primary:             #ffffff;
  --theme-primary-container:      #cbd5e1;
  --theme-on-primary-container:   #1e293b;

  /* Secondary & Tertiary Accents */
  --theme-secondary:              #0284c7;
  --theme-on-secondary:           #ffffff;
  --theme-tertiary:               #475569;
  --theme-on-tertiary:            #ffffff;

  /* Outlines & Borders */
  --theme-outline:                #cbd5e1;
  --theme-outline-variant:        #94a3b8;
  --theme-outline-faint:          rgba(15, 23, 42, 0.08);

  /* Status Colors */
  --theme-success:                #10b981;
  --theme-warning:                #f59e0b;
  --theme-error:                  #ef4444;
  --theme-info:                   #0284c7;

  /* Header & Navigation */
  --theme-header-bg:              rgba(245, 247, 251, 0.88);
  --theme-header-border:          transparent;
  --theme-nav-hover:              rgba(30, 41, 59, 0.05);

  /* Footer */
  --theme-footer-bg:              #e9ecf2;
  --theme-footer-border:          transparent;
  --theme-footer-text:            #64748b;
  --theme-footer-link-hover:      #1e293b;

  /* Atmospheric Ambient Glows & Grid */
  --theme-glow-1:                 transparent;
  --theme-glow-2:                 transparent;
  --theme-hero-glow:              transparent;
  --theme-grid:                   rgba(15, 23, 42, 0.035);
  --theme-input-focus:            #1e293b;
}

/* ─── 3. DARK MODE PALETTE (ILOVEWIDGETS PURE BLACK & NEON MINT) ─── */
html.dark {
  color-scheme: dark;

  /* Surfaces & Backgrounds — Pure Pitch Black & Subtle Translucent Glass */
  --theme-bg:                     #000000;
  --theme-surface:                rgba(255, 255, 255, 0.055);
  --theme-surface-bright:         rgba(255, 255, 255, 0.09);
  --theme-surface-dim:            rgba(255, 255, 255, 0.035);
  --theme-surface-variant:        rgba(255, 255, 255, 0.07);
  --theme-inverse-surface:        #ffffff;
  --theme-inverse-on-surface:     #000000;

  /* Text & Content — Crisp White and Muted Translucent Levels */
  --theme-text:                   #ffffff;
  --theme-text-muted:             rgba(255, 255, 255, 0.72);
  --theme-text-faint:             rgba(255, 255, 255, 0.5);

  /* Brand / Primary — Clean White Slate */
  --theme-primary:                #f1f5f9;
  --theme-on-primary:             #000000;
  --theme-primary-container:      rgba(255, 255, 255, 0.12);
  --theme-on-primary-container:   #ffffff;

  /* Secondary & Tertiary Accents — Cyan #50e3c2 & Slate Purple #8093b4 */
  --theme-secondary:              #50e3c2;
  --theme-on-secondary:           #000000;
  --theme-tertiary:               #8093b4;
  --theme-on-tertiary:            #ffffff;

  /* Outlines & Borders — 1px Crisp Ghost Borders */
  --theme-outline:                rgba(255, 255, 255, 0.16);
  --theme-outline-variant:        rgba(255, 255, 255, 0.3);
  --theme-outline-faint:          rgba(255, 255, 255, 0.08);

  /* Status Colors */
  --theme-success:                #10b981;
  --theme-warning:                #ffd641;
  --theme-error:                  #ff494a;
  --theme-info:                   #50e3c2;

  /* Header & Navigation */
  --theme-header-bg:              rgba(0, 0, 0, 0.85);
  --theme-header-border:          transparent;
  --theme-nav-hover:              rgba(255, 255, 255, 0.06);

  /* Footer */
  --theme-footer-bg:              rgba(0, 0, 0, 0.95);
  --theme-footer-border:          transparent;
  --theme-footer-text:            rgba(255, 255, 255, 0.65);
  --theme-footer-link-hover:      #ffffff;

  /* Atmospheric Ambient Glows & 50px Technical Grid — Neutral Clean Void */
  --theme-glow-1:                 transparent;
  --theme-glow-2:                 transparent;
  --theme-hero-glow:              transparent;
  --theme-grid:                   rgba(255, 255, 255, 0.012);
  --theme-input-focus:            #ffffff;
}

/* ══════════════════════════════════════════════════════════════════
   4. AESTHETIC PRESETS (INSTANT THEME SWITCHING)
   Switch by setting data-theme="preset-name" or class="theme-preset-name" on <html>
   ══════════════════════════════════════════════════════════════════ */

/* ── PRESET: SLATE CHARCOAL (PREVIOUS CLASSIC) ── */
html[data-theme="slate"],
html.theme-slate {
  --theme-font-heading:           'Manrope', system-ui, sans-serif;
  --theme-font-body:              'Lexend', system-ui, sans-serif;
  --theme-btn-radius:             8px;
  --theme-btn-text-transform:     none;
  --theme-btn-letter-spacing:     normal;
  --theme-card-radius:            12px;
  --theme-card-border-style:      dashed;
  --theme-card-border-width:      2px;

  --theme-bg:                     #121212;
  --theme-surface:                #1c1c1e;
  --theme-surface-bright:         #2c2c2e;
  --theme-surface-dim:            #171719;
  --theme-surface-variant:        #252528;

  --theme-primary:                #f1f5f9;
  --theme-on-primary:             #121212;
  --theme-secondary:              #94a3b8;
  --theme-tertiary:               #cbd5e1;

  --theme-outline:                #2c2c2e;
  --theme-outline-variant:        #3a3a3c;
  --theme-header-bg:              rgba(18, 18, 18, 0.85);
  --theme-header-border:          rgba(255, 255, 255, 0.05);
  --theme-glow-1:                 rgba(255, 255, 255, 0.03);
  --theme-hero-glow:              rgba(255, 255, 255, 0.07);
}

/* ── PRESET: CYBERPUNK / HIGH-TECH NEON ── */
html[data-theme="cyberpunk"],
html.theme-cyberpunk {
  --theme-font-heading:           'Outfit', 'Manrope', system-ui, sans-serif;
  --theme-btn-radius:             4px;
  --theme-btn-text-transform:     uppercase;
  --theme-btn-letter-spacing:     0.05em;
  --theme-card-radius:            8px;
  --theme-card-border-style:      solid;
  --theme-card-border-width:      2px;

  --theme-bg:                     #090d16;
  --theme-surface:                #0f172a;
  --theme-surface-bright:         #1e293b;
  --theme-surface-dim:            #0b1120;
  --theme-surface-variant:        #172554;

  --theme-primary:                #00f0ff;
  --theme-on-primary:             #090d16;
  --theme-secondary:              #ff0055;
  --theme-on-secondary:           #ffffff;

  --theme-outline:                rgba(0, 240, 255, 0.25);
  --theme-outline-variant:        rgba(0, 240, 255, 0.5);

  --theme-header-bg:              rgba(9, 13, 22, 0.9);
  --theme-header-border:          rgba(0, 240, 255, 0.15);
  --theme-glow-1:                 rgba(0, 240, 255, 0.08);
  --theme-glow-2:                 rgba(255, 0, 85, 0.05);
  --theme-hero-glow:              rgba(0, 240, 255, 0.15);
  --theme-grid:                   rgba(0, 240, 255, 0.04);
}

/* ── PRESET: NORDIC MINIMALIST (CRISP & SWISS) ── */
html[data-theme="minimal"],
html.theme-minimal {
  --theme-font-heading:           'Manrope', system-ui, sans-serif;
  --theme-font-body:              'Manrope', system-ui, sans-serif;
  --theme-btn-radius:             9999px;
  --theme-card-radius:            16px;
  --theme-card-border-style:      solid;
  --theme-card-border-width:      1px;

  --theme-bg:                     #0a0a0a;
  --theme-surface:                #141414;
  --theme-surface-bright:         #1f1f1f;
  --theme-surface-dim:            #0f0f0f;
  --theme-surface-variant:        #262626;

  --theme-primary:                #ffffff;
  --theme-on-primary:             #000000;
  --theme-secondary:              #a3a3a3;
  --theme-outline:                #262626;
  --theme-outline-variant:        #404040;

  --theme-glow-1:                 transparent;
  --theme-glow-2:                 transparent;
  --theme-hero-glow:              rgba(255, 255, 255, 0.03);
  --theme-grid:                   rgba(255, 255, 255, 0.015);
}

/* ── PRESET: MIDNIGHT OLED (TRUE BLACK & SAPPHIRE) ── */
html[data-theme="midnight"],
html.theme-midnight {
  --theme-bg:                     #000000;
  --theme-surface:                #08090c;
  --theme-surface-bright:         #11141c;
  --theme-surface-dim:            #040508;
  --theme-surface-variant:        #151924;

  --theme-primary:                #38bdf8;
  --theme-on-primary:             #000000;
  --theme-outline:                #1e2638;
  --theme-outline-variant:        #2e3a52;

  --theme-header-bg:              rgba(0, 0, 0, 0.9);
  --theme-header-border:          rgba(56, 189, 248, 0.1);
  --theme-glow-1:                 rgba(56, 189, 248, 0.05);
  --theme-glow-2:                 rgba(99, 102, 241, 0.04);
  --theme-hero-glow:              rgba(56, 189, 248, 0.1);
}

/* ── PRESET: RETRO ARCADE / TERMINAL (AMBER & MATRIX) ── */
html[data-theme="retro"],
html.theme-retro {
  --theme-font-heading:           var(--theme-font-mono);
  --theme-font-body:              var(--theme-font-mono);
  --theme-btn-radius:             0px;
  --theme-card-radius:            2px;
  --theme-card-border-style:      solid;
  --theme-card-border-width:      2px;

  --theme-bg:                     #0c0f0a;
  --theme-surface:                #12170f;
  --theme-surface-bright:         #192214;
  --theme-surface-dim:            #0d120a;
  --theme-surface-variant:        #1f2a1a;

  --theme-text:                   #22c55e;
  --theme-text-muted:             #16a34a;
  --theme-text-faint:             #15803d;

  --theme-primary:                #22c55e;
  --theme-on-primary:             #0c0f0a;
  --theme-secondary:              #eab308;
  --theme-outline:                #1f2a1a;
  --theme-outline-variant:        #22c55e;

  --theme-glow-1:                 rgba(34, 197, 94, 0.08);
  --theme-glow-2:                 rgba(234, 179, 8, 0.04);
  --theme-hero-glow:              rgba(34, 197, 94, 0.12);
  --theme-grid:                   rgba(34, 197, 94, 0.04);
}

/* ══════════════════════════════════════════════════════════════════
   5. BACKWARD COMPATIBILITY BRIDGE (ZERO BREAKING CHANGES)
   Aliases existing --color-*, --bg, --card-*, and --font-* tokens
   directly to the new --theme-* tokens.
   ══════════════════════════════════════════════════════════════════ */
:root,
html.light,
html.dark {
  /* Surface & Background Aliases */
  --color-background:             var(--theme-bg);
  --color-surface:                var(--theme-surface);
  --color-surface-bright:         var(--theme-surface-bright);
  --color-surface-dim:            var(--theme-surface-dim);
  --color-surface-variant:        var(--theme-surface-variant);
  --color-inverse-surface:        var(--theme-inverse-surface);
  --color-inverse-on-surface:     var(--theme-inverse-on-surface);

  /* Content Aliases */
  --color-on-background:          var(--theme-text);
  --color-on-surface:             var(--theme-text);
  --color-on-surface-variant:     var(--theme-text-muted);

  /* Brand / Accent Aliases */
  --color-primary:                var(--theme-primary);
  --color-on-primary:             var(--theme-on-primary);
  --color-primary-container:      var(--theme-primary-container);
  --color-on-primary-container:   var(--theme-on-primary-container);
  --color-secondary:              var(--theme-secondary);
  --color-on-secondary:           var(--theme-on-secondary);
  --color-tertiary:               var(--theme-tertiary);
  --color-on-tertiary:            var(--theme-on-tertiary);

  /* Outline Aliases */
  --color-outline:                var(--theme-outline);
  --color-outline-variant:        var(--theme-outline-variant);

  /* Header & Footer Aliases */
  --color-header-bg:              var(--theme-header-bg);
  --color-header-border:          var(--theme-header-border);
  --color-nav-hover:              var(--theme-nav-hover);
  --color-footer-bg:              var(--theme-footer-bg);
  --color-footer-border:          var(--theme-footer-border);
  --color-footer-text:            var(--theme-footer-text);
  --color-footer-link-hover:      var(--theme-footer-link-hover);

  /* Atmospheric Aliases */
  --color-bg-glow-1:              var(--theme-glow-1);
  --color-bg-glow-2:              var(--theme-glow-2);
  --color-hero-glow:              var(--theme-hero-glow);
  --color-grid:                   var(--theme-grid);
  --color-input-focus:            var(--theme-input-focus);

  /* Test Base Aliases */
  --bg:                           var(--theme-bg);
  --card-bg:                      var(--theme-surface);
  --card-border:                  var(--theme-outline);
  --text:                         var(--theme-text);
  --text-muted:                   var(--theme-text-muted);
  --text-faint:                   var(--theme-text-faint);

  /* Font Aliases */
  --font-h:                       var(--theme-font-heading);
  --font-b:                       var(--theme-font-body);
  --font-manrope:                 var(--theme-font-heading);
  --font-lexend:                  var(--theme-font-body);
}