/* =========================================================
   Design tokens - core obligatory variables
   Source: design/components/tokens.css
   ========================================================= */
:root {
  --color-primary: #0ea5e9;
  --color-primary-hover: #00b0ff;
  --color-primary-soft: #94d2f1;
  --color-primary-soft-2: #8ac6e6;
  --color-secondary: #0d9488;
  --color-secondary-hover: #10baab;
  --color-danger: #f34c3d;
  --color-slate-900: #1e293b;
  --color-slate-800: #334155;
  --color-slate-600: #64748b;
  --color-slate-400: #94a3b8;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-surface-alt: #e7e7e7;
  --color-surface-soft: #f0f9ff;
  --color-border-soft: rgba(0, 0, 0, 0.05);
  --color-border-strong: #e0f2fe;
  --color-overlay: rgba(255, 255, 255, 0.4);
  --color-accent-purple-soft: rgba(151, 71, 255, 0.02);

  --font-body: "Inter", sans-serif;
  --font-heading: "Manrope", sans-serif;

  --radius-2xs: 2px;
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 18px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-5xl: 32px;
  --radius-6xl: 40px;

  --shadow-glass: 0 0 25px rgba(14, 165, 233, 0.15);
  --blur-glass: blur(12px);

  --border-width-default: 1px;
  --border-width-strong: 1.5px;
  --border-width-2x: 2px;
  --transition-fast: 160ms ease;
}