/* ==========================================================================
   DESIGN TOKENS & THEMING SYSTEM
   MD. YEASIR ARAFAT — ELECTRICAL & ELECTRONIC PORTFOLIO
   ========================================================================== */

:root {
  /* Common Geometry & Typography Tokens */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --transition-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 260ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 450ms cubic-bezier(0.16, 1, 0.3, 1);

  --container-max: 1240px;
  --header-height: 76px;
  
  --z-base: 1;
  --z-card: 10;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 500;
  --z-toast: 1000;
}

/* --------------------------------------------------------------------------
   DARK THEME (Default AMOLED Engineering)
   Deep dark slate, circuit glow, high contrast, clean technical cyan/blue
   -------------------------------------------------------------------------- */
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  color-scheme: dark;

  --bg-primary: #07090e;
  --bg-secondary: #0c1017;
  --bg-tertiary: #131924;
  --bg-elevated: #17202f;
  --bg-glass: rgba(12, 16, 23, 0.82);
  --bg-glass-card: rgba(19, 25, 36, 0.72);

  --text-primary: #f2f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-muted: #475569;

  /* Electrical Accents */
  --accent-cyan: #00f0ff;
  --accent-cyan-rgb: 0, 240, 255;
  --accent-blue: #0070f3;
  --accent-blue-rgb: 0, 112, 243;
  --accent-green: #10b981;
  --accent-green-rgb: 16, 185, 129;
  --accent-amber: #f59e0b;
  --accent-glow: rgba(0, 240, 255, 0.28);

  /* Subtle technical borders */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-accent: rgba(0, 240, 255, 0.28);
  --border-accent-strong: rgba(0, 240, 255, 0.6);

  /* Technical Grid & Shadows */
  --grid-line: rgba(255, 255, 255, 0.035);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 0 25px rgba(0, 240, 255, 0.22);
  --shadow-glow-strong: 0 0 35px rgba(0, 240, 255, 0.42);

  /* Badge Backgrounds */
  --badge-bg: rgba(0, 240, 255, 0.08);
  --badge-text: #00f0ff;
  --badge-border: rgba(0, 240, 255, 0.22);

  /* Glassmorphism Surface Tokens (Dark AMOLED) */
  --glass-bg: rgba(14, 20, 32, 0.65);
  --glass-bg-subtle: rgba(10, 14, 24, 0.45);
  --glass-bg-elevated: rgba(20, 28, 44, 0.8);
  --glass-border: rgba(0, 240, 255, 0.22);
  --glass-border-light: rgba(255, 255, 255, 0.12);
  --glass-inner-glow: rgba(0, 240, 255, 0.05);
  --glass-specular-top: rgba(0, 240, 255, 0.45);
  --glass-specular-left: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  --lightning-spark: #a5f3fc;
}

/* --------------------------------------------------------------------------
   LIGHT THEME (Clean Technical Blueprint / Paper White)
   Crisp, high-legibility, precision technical lines, industrial blue
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-elevated: #e2e8f0;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --bg-glass-card: rgba(255, 255, 255, 0.85);

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #64748b;
  --text-muted: #94a3b8;

  /* Electrical Accents */
  --accent-cyan: #0284c7;
  --accent-cyan-rgb: 2, 132, 199;
  --accent-blue: #0369a1;
  --accent-blue-rgb: 3, 105, 161;
  --accent-green: #059669;
  --accent-green-rgb: 5, 150, 105;
  --accent-amber: #d97706;
  --accent-glow: rgba(2, 132, 199, 0.18);

  /* Subtle technical borders */
  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-medium: rgba(15, 23, 42, 0.14);
  --border-accent: rgba(2, 132, 199, 0.32);
  --border-accent-strong: rgba(2, 132, 199, 0.75);

  /* Technical Grid & Shadows */
  --grid-line: rgba(15, 23, 42, 0.035);
  --shadow-sm: 0 1px 4px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 18px -3px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 14px 30px -6px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 20px rgba(2, 132, 199, 0.15);
  --shadow-glow-strong: 0 0 30px rgba(2, 132, 199, 0.28);

  /* Badge Backgrounds */
  --badge-bg: rgba(2, 132, 199, 0.08);
  --badge-text: #0284c7;
  --badge-border: rgba(2, 132, 199, 0.22);

  /* Glassmorphism Surface Tokens (Light Engineering) */
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-bg-subtle: rgba(248, 250, 252, 0.65);
  --glass-bg-elevated: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(2, 132, 199, 0.25);
  --glass-border-light: rgba(15, 23, 42, 0.08);
  --glass-inner-glow: rgba(2, 132, 199, 0.03);
  --glass-specular-top: rgba(255, 255, 255, 0.9);
  --glass-specular-left: rgba(2, 132, 199, 0.3);
  --glass-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  --lightning-spark: #38bdf8;
}