/**
 * KashifX CSS Theme Variables — Single Source of Truth (CSS Side)
 *
 * This file defines all CSS custom properties used throughout the project.
 * Values MUST match /js/theme/index.js exactly.
 *
 * HOW TO UPDATE:
 * 1. Change the value in /js/theme/index.js (the canonical source)
 * 2. Mirror the change in the corresponding variable below
 * 3. The main style.css imports these via :root
 *
 * TOKEN MAPPING (JS → CSS):
 *   colors.background.primary   → --bg-primary
 *   colors.background.secondary → --bg-secondary
 *   colors.background.card      → --bg-card
 *   colors.background.cardHover → --bg-card-hover
 *   colors.accent.green         → --green-primary
 *   colors.accent.greenDark     → --green-dark
 *   colors.accent.gold          → --gold-accent
 *   colors.accent.goldDark      → --gold-dark
 *   colors.text.primary         → --text-primary
 *   colors.text.secondary       → --text-secondary
 *   colors.text.muted           → --text-muted
 *   colors.border.default       → --border-color
 *   colors.status.success       → --color-success
 *   colors.status.error         → --color-error
 *   colors.finance.positive     → --finance-positive
 *   colors.finance.negative     → --finance-negative
 *   colors.finance.neutral      → --finance-neutral
 *   colors.utility.white        → --color-white
 *   colors.utility.black        → --color-black
 *   colors.overlay.dark         → --overlay-dark
 *   colors.overlay.nav          → --overlay-nav
 *   colors.glow.greenSubtle     → --green-glow-subtle
 *   colors.glow.greenFaint      → --green-glow-faint
 *   colors.glow.greenBgLight    → --green-bg-light
 *   colors.glow.greenBorderLight→ --green-border-light
 *   colors.glow.goldSubtle      → --gold-glow-subtle
 *   colors.glow.goldFaint       → --gold-glow-faint
 *   radius.sm                   → --radius-sm
 *   radius.md                   → --radius
 *   shadows.card                → --shadow
 *   shadows.focus               → --shadow-focus
 *   shadows.greenGlow           → --shadow-green
 *   shadows.goldGlow            → --shadow-gold
 *   transitions.base            → --transition
 *   transitions.fast            → --transition-fast
 *   transitions.slow            → --transition-slow
 *   layout.maxWidth             → --max-width
 *   layout.navHeight            → --nav-height
 */

:root {
  /* ── Background ── */
  --bg-primary: #0A0F1A;
  --bg-secondary: #111827;
  --bg-card: #1A2332;
  --bg-card-hover: #1F2B3D;

  /* ── Accent Colors ── */
  --green-primary: #00C853;
  --green-dark: #00A344;
  --gold-accent: #D4A853;
  --gold-dark: #B8923F;

  /* ── Text ── */
  --text-primary: #F0F0F0;
  --text-secondary: #A0AEC0;
  --text-muted: #6B7A90;

  /* ── Borders ── */
  --border-color: #2D3748;

  /* ── Status ── */
  --color-success: #00C853;
  --color-error: #E53E3E;
  --color-warning: #D4A853;
  --color-info: #3182CE;

  /* ── Finance ── */
  --finance-positive: #1A6B4A;
  --finance-negative: #8B1A1A;
  --finance-neutral: #4A5568;

  /* ── Utility ── */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* ── Overlays ── */
  --overlay-dark: rgba(0, 0, 0, 0.7);
  --overlay-nav: rgba(10, 15, 26, 0.9);

  /* ── Glow / Tint Variants ── */
  --green-glow-subtle: rgba(0, 200, 83, 0.08);
  --green-glow-faint: rgba(0, 200, 83, 0.04);
  --green-bg-light: rgba(0, 200, 83, 0.1);
  --green-border-light: rgba(0, 200, 83, 0.2);
  --gold-glow-subtle: rgba(212, 168, 83, 0.08);
  --gold-glow-faint: rgba(212, 168, 83, 0.1);

  /* ── Radius ── */
  --radius: 12px;
  --radius-sm: 8px;

  /* ── Shadows ── */
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-focus: 0 0 0 3px rgba(0, 200, 83, 0.15);
  --shadow-green: 0 6px 20px rgba(0, 200, 83, 0.3);
  --shadow-gold: 0 6px 20px rgba(212, 168, 83, 0.3);

  /* ── Transitions ── */
  --transition: 0.3s ease;
  --transition-fast: 0.15s ease;
  --transition-slow: 0.6s ease;

  /* ── Layout ── */
  --max-width: 1120px;
  --nav-height: 72px;
}