/* ==========================================================================
   T&T Stock Market
   CORE-001 — Theme System
   File: assets/css/variables.css
   ========================================================================== */

:root {

  /* ========================================================================
     BRAND
     ======================================================================== */

  --color-primary: #009DFF;
  --color-primary-hover: #007ED0;

  /* ========================================================================
     BACKGROUND
     ======================================================================== */

  --color-background: #050505;
  --color-surface: #181818;
  --color-surface-alt: #202020;

  /* ========================================================================
     BORDERS
     ======================================================================== */

  --color-border: #2E2E2E;
  --color-divider: #3A3A3A;

  /* ========================================================================
     TEXT
     ======================================================================== */

  --color-text: #F5F5F5;
  --color-text-secondary: #B5B5B5;
  --color-text-muted: #8C8C8C;

  /* ========================================================================
     MARKET STATUS
     ======================================================================== */

  --color-success: #22C55E;
  --color-danger: #EF4444;
  --color-neutral: #9CA3AF;

  /* ========================================================================
     SPACING
     ======================================================================== */

  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* ========================================================================
     BORDER RADIUS
     ======================================================================== */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* ========================================================================
     SHADOWS
     ======================================================================== */

  --shadow-sm: 0 1px 3px rgba(0,0,0,.25);
  --shadow-md: 0 6px 18px rgba(0,0,0,.30);
  --shadow-lg: 0 10px 28px rgba(0,0,0,.40);

  /* ========================================================================
     LAYOUT
     ======================================================================== */

  --header-height: 72px;
  --sidebar-width: 280px;
  --content-max-width: 1800px;

  /* ========================================================================
     TRANSITIONS
     ======================================================================== */

  --transition-fast: .15s ease;
  --transition-normal: .25s ease;
  --transition-slow: .40s ease;

}