/* ============================================
   TrainO Design Tokens (Website)
   Synced from src/styles/tokens.css
   ============================================ */

:root {
  /* Backgrounds */
  --color-graphite: #0B0F12;
  --color-onyx: #12161B;
  --color-surface: #1A1F24;
  --color-surface-hover: #22282E;
  --color-surface-border: #2A3038;

  /* Text */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #9CA3AF;
  --color-text-disabled: #5C6670;
  --color-text-muted: #6B7280;

  /* Primary Accent - Teal */
  --color-core-green: #5FAFA6;
  --color-core-green-soft: #2F8F83;
  --color-core-green-dim: #2A7D73;

  /* Glows */
  --glow-green-soft: rgba(47, 143, 131, 0.12);
  --glow-green-medium: rgba(47, 143, 131, 0.20);
  --glow-green-strong: rgba(34, 227, 142, 0.30);

  /* Functional */
  --color-error: #EF4444;
  --color-error-soft: rgba(239, 68, 68, 0.15);
  --color-amber: #F5A623;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Borders & Radii */
  --border-subtle: 1px solid rgba(255, 255, 255, 0.06);
  --border-default: 1px solid rgba(255, 255, 255, 0.10);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-default: ease;
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}