/* Binlogic - Design Tokens & Custom Properties */
:root {
  /* Color Palette - Dark Petroleum & Electric Accents */
  --bg-dark: #070a11;
  --bg-dark-alt: #0d121f;
  --surface-card: #131b2e;
  --surface-card-hover: #18233c;
  --surface-elevated: #1a2640;
  --surface-glass: rgba(19, 27, 46, 0.75);
  
  /* Primary & Accent Colors */
  --color-primary: #00f0ff;          /* Electric Cyan */
  --color-primary-glow: rgba(0, 240, 255, 0.25);
  --color-primary-subtle: rgba(0, 240, 255, 0.08);
  
  --color-secondary: #8a2be2;        /* Tech Violet */
  --color-secondary-glow: rgba(138, 43, 226, 0.25);
  --color-secondary-subtle: rgba(138, 43, 226, 0.1);
  
  --color-accent: #00ffa3;           /* Mint Green Status */
  --color-warning: #ffb800;          /* Warning Yellow */
  --color-danger: #ff4757;           /* Critical Red */

  /* Text Colors */
  --text-main: #f0f4f8;              /* Warm White */
  --text-secondary: #8a99ad;         /* Muted Slate Grey */
  --text-dim: #5c6b7e;               /* Dark Slate Text */
  --text-inverse: #070a11;           /* Dark Text */

  /* Borders & Glass */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-cyan: rgba(0, 240, 255, 0.2);
  --border-cyan-bright: rgba(0, 240, 255, 0.5);
  --glass-blur: blur(12px);

  /* Fonts */
  --font-sans: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', SFMono-Regular, Consolas, monospace;

  /* Typography Scale (Clamp) */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.82rem + 0.3vw, 1rem);
  --fs-base: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --fs-xl: clamp(1.35rem, 1.2rem + 0.75vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.35rem);
  --fs-3xl: clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem);
  --fs-hero: clamp(2.6rem, 2.1rem + 2.5vw, 4.25rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 840px;
  --header-height: 80px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Visual Rhythm Theme Tokens */
  --bg-editorial: #f8fafc;
  --bg-editorial-card: #ffffff;
  --bg-editorial-card-hover: #f1f5f9;
  --text-editorial-main: #0f172a;
  --text-editorial-secondary: #475569;
  --border-editorial: #e2e8f0;

  --bg-navy: #081226;
  --bg-navy-card: #0e1d3b;
  --border-navy: rgba(0, 240, 255, 0.15);

  --bg-neutral: #0f172a;
  --bg-neutral-card: #1e293b;

  --bg-blueprint: #0a0e1a;
  --grid-blueprint: rgba(0, 240, 255, 0.04);
}

/* Light Mode Theme Overrides (Default remains Dark) */
html[data-theme="light"] {
  --bg-dark: #ffffff;
  --bg-dark-alt: #f8fafc;
  --surface-card: #f1f5f9;
  --surface-card-hover: #e2e8f0;
  --surface-elevated: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.88);

  --color-primary: #0284c7;
  --color-primary-glow: rgba(2, 132, 199, 0.2);
  --color-primary-subtle: rgba(2, 132, 199, 0.08);

  --color-secondary: #7c3aed;
  --color-secondary-glow: rgba(124, 58, 237, 0.2);
  --color-secondary-subtle: rgba(124, 58, 237, 0.08);

  --color-accent: #059669;

  --text-main: #0f172a;
  --text-secondary: #475569;
  --text-dim: #64748b;
  --text-inverse: #ffffff;

  --border-subtle: #cbd5e1;
  --border-cyan: rgba(2, 132, 199, 0.3);
  --border-cyan-bright: rgba(2, 132, 199, 0.6);

  --bg-blueprint: #f8fafc;
  --grid-blueprint: rgba(2, 132, 199, 0.06);

  --bg-navy: #f1f5f9;
  --bg-navy-card: #ffffff;
  --border-navy: #cbd5e1;

  --bg-neutral: #f1f5f9;
  --bg-neutral-card: #ffffff;
}