/* ==========================
   Variables
========================== */

:root {
  /* ==========================
     Core Colors
  ========================== */

  --color-bg: #0f1117;

  --color-surface: #171a23;
  --color-surface-alt: #1f2330;

  --color-border: rgba(148, 163, 184, 0.18);
  --color-border-hover: rgba(139, 156, 255, 0.35);

  --color-text: #f5f7fa;
  --color-muted: #a3aab8;

  /* ==========================
     Brand Accent Colors
  ========================== */

  --color-accent-blue: #7499ff;
  --color-accent-purple: #b5b8df;

  --color-accent: var(--color-accent-blue);

  /* ==========================
     Brand Gradient Accent Colors
  ========================== */

  --gradient-accent-blue: linear-gradient(
    180deg,
    rgba(145, 190, 255, 1),
    rgba(90, 150, 255, 1) 45%,
    rgba(55, 110, 235, 1)
  );

  --gradient-accent-purple: linear-gradient(
    180deg,
    rgba(210, 170, 255, 1),
    rgba(168, 110, 255, 1) 45%,
    rgba(118, 72, 235, 1)
  );

  /* ==========================
     Status Colors
  ========================== */

  --color-success: #47d16c;
  --color-warning: #ffd166;
  --color-danger: #ff5c5c;

  --color-success-soft: rgba(71, 209, 108, 0.14);
  --color-warning-soft: rgba(255, 209, 102, 0.14);
  --color-danger-soft: rgba(255, 92, 92, 0.14);

  /* ==========================
     Ambient Glow Tokens
  ========================== */

  --gradient-bg-blue: rgba(116, 153, 255, 0.22);
  --gradient-bg-purple: rgba(181, 184, 223, 0.16);

  --color-card-glow: rgba(99, 102, 241, 0.18);

  /* ==========================
     Page Gradient Tokens
  ========================== */

  --gradient-page-start: #0f1117;
  --gradient-page-mid: #141824;
  --gradient-page-end: #1a1b2d;

  /* ==========================
     Card Gradient Tokens
  ========================== */

  --gradient-card-start: #171a23;
  --gradient-card-mid: #212436;
  --gradient-card-end: #2c2747;

  /* ==========================
     Component Accent Defaults
  ========================== */

  --card-accent: var(--color-accent);
  --card-accent-soft: rgba(99, 102, 241, 0.12);
  --card-accent-border: rgba(139, 156, 255, 0.35);

  /* ==========================
     Glow Shadows
  ========================== */

  --shadow-glow-accent: 0 0 28px rgba(116, 153, 255, 0.16);
  --shadow-glow-success: 0 0 18px rgba(71, 209, 108, 0.35);
  --shadow-glow-warning: 0 0 18px rgba(255, 209, 102, 0.3);
  --shadow-glow-danger: 0 0 18px rgba(255, 92, 92, 0.3);

  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.28);
  --shadow-card-hover: 0 0 0 1px rgba(139, 156, 255, 0.18), 0 0 24px rgba(99, 102, 241, 0.22);

  /* ==========================
     Border Radius
  ========================== */

  --radius-lg: 18px;
  --radius-card: 1.25rem;

  /* ==========================
     Spacing
  ========================== */

  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;

  --space-page: 1.5rem;
  --space-section: 2rem;
  --space-heading: 0.75rem;
  --space-section-heading: 2rem;
  --space-card: 1.5rem;
  --space-grid: 1.5rem;
  --space-actions: 2rem;
}