@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);

  /* Overlay & interactive */
  --overlay: rgba(0,0,0,.6);
  --hover-bg: rgba(255,255,255,.04);
  --hover-bg-strong: rgba(255,255,255,.08);
  --stripe-bg: rgba(255,255,255,.015);
  --autofill-bg: #0d1117;
  --autofill-text: #e2e8f0;
  --scrollbar-thumb: rgba(45,123,181,.18);
  --scrollbar-thumb-hover: rgba(45,123,181,.3);
  --selection-bg: rgba(45,232,200,.2);

  /* 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);
}

/* ═══ LIGHT THEME ═══ */
:root[data-theme="light"] {
  --bg: #f4f6f9;
  --bg-dark: #e9ecf2;
  --surface: #ffffff;
  --surface-2: #f0f2f6;
  --panel: #ffffff;
  --card: #ffffff;
  --bg-panel: #f0f2f6;

  --border: rgba(0,0,0,.09);
  --border-subtle: rgba(0,0,0,.05);
  --border-hover: rgba(45,123,181,.4);
  --border-brand: rgba(45,232,200,.3);

  --accent: #2570a0;
  --accent-dim: rgba(37,112,160,.08);
  --accent-glow: rgba(37,112,160,.15);
  --accent-bright: #1d8acf;

  --accent2: #11b89a;
  --accent2-dim: rgba(17,184,154,.08);
  --accent2-glow: rgba(17,184,154,.15);

  --success: #059669;
  --success-dim: rgba(5,150,105,.08);
  --warn: #d97706;
  --warn-dim: rgba(217,119,6,.08);
  --danger: #dc2626;
  --danger-dim: rgba(220,38,38,.06);

  --text: #1a1d24;
  --text-primary: #1a1d24;
  --text-secondary: #5b6478;
  --text-muted: #5b6478;
  --fg: #1a1d24;
  --muted: #7c8599;

  --surface2: #f0f2f6;

  --glass: rgba(255,255,255,.88);
  --glass-border: rgba(0,0,0,.06);
  --glass-highlight: rgba(37,112,160,.04);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.07);
  --shadow-md: 0 4px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.1);
  --shadow-brand: 0 4px 20px rgba(37,112,160,.1);
  --shadow-glow: 0 0 20px rgba(17,184,154,.06);

  --overlay: rgba(0,0,0,.25);
  --hover-bg: rgba(0,0,0,.04);
  --hover-bg-strong: rgba(0,0,0,.07);
  --stripe-bg: rgba(0,0,0,.02);
  --autofill-bg: #ffffff;
  --autofill-text: #1a1d24;
  --scrollbar-thumb: rgba(0,0,0,.12);
  --scrollbar-thumb-hover: rgba(0,0,0,.2);
  --selection-bg: rgba(37,112,160,.15);

  /* Quick-start modal */
  --qs-modal-bg: linear-gradient(168deg, rgba(255,255,255,.97) 0%, rgba(248,250,252,.99) 100%);
  --qs-modal-border: rgba(0,0,0,.08);
  --qs-modal-shadow: 0 0 0 1px rgba(0,0,0,.03), 0 24px 80px rgba(0,0,0,.1), 0 0 40px rgba(45,123,181,.04);
  --qs-card-bg: rgba(0,0,0,.015);
  --qs-card-border: rgba(0,0,0,.07);
  --qs-card-hover: rgba(0,0,0,.03);
  --qs-card-hover-border: rgba(45,123,181,.2);
  --qs-card-hover-shadow: 0 8px 32px rgba(0,0,0,.06);
}