/* =====================================================================
   DESIGN TOKENS
   =====================================================================
   Every other stylesheet in this project reads colors, radii, shadows,
   and timing from these custom properties — never hardcode a hex value
   or a blur amount directly in a component file. This is the one file
   to edit if the brand palette ever changes.

   Values here are taken directly from the project's design brief:
   Cyber Dark theme, Glassmorphism, Neon Glow, 25px radius, 30px blur.
   ===================================================================== */

:root {
  /* --- Brand colors --- */
  --color-primary: #F21D4B;
  --color-primary-rgb: 242, 29, 75;
  --color-secondary: #20D9F5;
  --color-secondary-rgb: 32, 217, 245;
  --color-success: #00E676;
  --color-success-rgb: 0, 230, 118;
  --color-danger: #FF4D6D;
  --color-danger-rgb: 255, 77, 109;
  --color-warning: #FFC857;
  --color-warning-rgb: 255, 200, 87;
  --color-accent: #FF315D;
  --color-accent-rgb: 255, 49, 93;

  /* --- Backgrounds (darkest to lightest — layer cards on top of these) --- */
  --bg-deepest: #030305;
  --bg-base: #090A0F;
  --bg-elevated: #11131B;

  /* --- Glass surface --- */
  --glass-bg: rgba(15, 16, 23, 0.78);
  --glass-bg-hover: rgba(28, 26, 37, 0.88);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-blur: 18px;

  /* --- Text --- */
  --text-primary: #F3F4F6;
  --text-secondary: #AAB8C9;
  --text-muted: #718198;

  /* --- Shape & elevation --- */
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --shadow-card: 0 24px 70px rgba(0, 0, 0, 0.34), 0 2px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-glow-primary: 0 0 28px rgba(var(--color-primary-rgb), 0.50);
  --shadow-glow-secondary: 0 0 24px rgba(var(--color-secondary-rgb), 0.42);
  --shadow-glow-success: 0 0 20px rgba(var(--color-success-rgb), 0.4);
  --shadow-glow-danger: 0 0 20px rgba(var(--color-danger-rgb), 0.4);

  /* --- Motion --- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Typography --- */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Type scale — 1.25 (major third) ratio for clear hierarchy */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;

  /* --- Layout --- */
  --sidebar-width: 272px;
  --topbar-height: 76px;
  --content-max-width: 1400px;
}