@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700;800&display=swap');

/* ═══ DESIGN TOKENS ═══ */
:root {
  /* Brand core */
  --brand-blue: #2d7bb5;
  --brand-cyan: #2de8c8;
  --brand-gradient: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));

  /* Surfaces */
  --bg: #0a0e14;
  --bg-dark: #070a0f;
  --surface: #0e1219;
  --surface-2: #131922;
  --panel: #141a24;
  --card: #182030;
  --bg-panel: #131922;

  /* Borders */
  --border: rgba(255,255,255,.07);
  --border-subtle: rgba(255,255,255,.04);
  --border-hover: rgba(45,123,181,.35);
  --border-brand: rgba(45,232,200,.2);

  /* Brand accent */
  --accent: #2d7bb5;
  --accent-dim: rgba(45,123,181,.12);
  --accent-glow: rgba(45,123,181,.25);
  --accent-bright: #3a9ad4;

  /* Secondary accent (cyan) */
  --accent2: #2de8c8;
  --accent2-dim: rgba(45,232,200,.10);
  --accent2-glow: rgba(45,232,200,.25);

  /* Semantic */
  --success: #34d399;
  --success-dim: rgba(52,211,153,.1);
  --warn: #fbbf24;
  --warn-dim: rgba(251,191,36,.1);
  --danger: #f87171;
  --danger-dim: rgba(248,113,113,.1);

  /* Text */
  --text: #e4e8f0;
  --text-primary: #e4e8f0;
  --text-secondary: #8b92a8;
  --text-muted: #8b92a8;
  --fg: #e4e8f0;
  --muted: #555d75;

  /* Aliases for canvas / overlay */
  --surface2: #131922;

  /* Typography */
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Glass */
  --glass: rgba(14,18,25,.82);
  --glass-border: rgba(255,255,255,.06);
  --glass-highlight: rgba(45,232,200,.04);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --shadow-md: 0 4px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.6);
  --shadow-brand: 0 4px 20px rgba(45,123,181,.15);
  --shadow-glow: 0 0 20px rgba(45,232,200,.08);

  /* Radii */
  --radius-xs: 5px;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,.0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}