/* =========================================================
   GAIA Cloud — Design Tokens
   Colors, typography, spacing, radii, shadows
   ========================================================= */

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

:root {
  /* ---------- Primary brand ---------- */
  --color-navy-dark: #0F172A;   /* sidebar, auth, code blocks */
  --color-navy: #1A2744;        /* dark card bg, modal backdrop */
  --color-navy-mid: #1E3A5F;    /* headings on light */
  --color-sky-blue: #38BDF8;    /* primary accent */
  --color-link: #0E7490;        /* links on light (AA) */
  --color-white: #F8FAFC;

  /* ---------- Blue spectrum ---------- */
  --color-medium-blue: #5B9BD5;
  --color-light-blue: #93C5FD;
  --color-pale-blue: #DBEAFE;

  /* ---------- Neutrals ---------- */
  --color-slate: #64748B;               /* on White only */
  --color-slate-600: #475569;           /* body on Light BG */
  --color-muted: #94A3B8;               /* placeholders + dark bg only */
  --color-muted-accessible: #6B7A8D;    /* captions on Light BG */
  --color-light-bg: #F0F4F8;
  --color-border: #CBD5E1;

  /* ---------- Semantic ---------- */
  --color-success: #34D399;
  --color-success-dark: #059669;  /* 3:1 non-text on white */
  --color-warning: #FB923C;
  --color-amber: #F59E0B;
  --color-error: #DC2626;
  --color-error-light: #EF4444;
  --color-decision: #818CF8;
  --color-deploy: #F472B6;

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, monospace;

  --type-display-size: 44px;  --type-display-weight: 700;
  --type-h1-size: 30px;       --type-h1-weight: 700;
  --type-h2-size: 22px;       --type-h2-weight: 700;
  --type-h3-size: 16px;       --type-h3-weight: 700;
  --type-body-size: 14px;     --type-body-weight: 400;
  --type-small-size: 12px;
  --type-code-size: 13px;

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* ---------- Layout ---------- */
  --sidebar-width: 220px;
  --sidebar-collapsed: 64px;
  --topbar-height: 56px;
  --tree-width: 250px;

  /* ---------- Radii ---------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-card: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-elev: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-modal: 0 24px 48px rgba(15, 23, 42, 0.24);
  --focus-ring: 0 0 0 2px var(--color-sky-blue);
}

/* ---------- Semantic element defaults ---------- */
html, body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  color: var(--color-slate-600);
  background: var(--color-light-bg);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--type-h1-size); font-weight: 700; color: var(--color-navy-dark); line-height: 1.2; }
h2 { font-size: var(--type-h2-size); font-weight: 700; color: var(--color-navy-mid); line-height: 1.25; }
h3 { font-size: var(--type-h3-size); font-weight: 700; color: var(--color-navy-mid); line-height: 1.3; }
p  { font-size: var(--type-body-size); color: var(--color-slate-600); line-height: 1.55; }
code, pre, kbd { font-family: var(--font-mono); font-size: var(--type-code-size); }
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Utility: dark surfaces ---------- */
.gaia-dark { background: var(--color-navy-dark); color: var(--color-white); }
.gaia-dark h1, .gaia-dark h2, .gaia-dark h3 { color: var(--color-white); }
.gaia-dark p { color: var(--color-muted); }
.gaia-dark a { color: var(--color-sky-blue); }