/* Design-system tokens — imported before all other styles */

/* Inter font is loaded via Google Fonts in base.html */

:root {
  /* Brand colours */
  --color-brand: #0EA5E9;          /* sky-500  — decorative use only (fails 4.5:1 on white) */
  --color-brand-dark: #0284C7;     /* sky-600  — use for text on light backgrounds */
  --color-brand-darker: #0369A1;   /* sky-700  — hover states on light backgrounds */

  /* Neutral / surface */
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;  /* slate-50 */
  --color-border: #e2e8f0;         /* slate-200 */
  --color-border-subtle: #f1f5f9;  /* slate-100 */

  /* Text */
  --color-text-primary: #0f172a;   /* slate-900 */
  --color-text-secondary: #475569; /* slate-600 */
  --color-text-muted: #64748b;     /* slate-500 */
  --color-text-placeholder: #94a3b8; /* slate-400 */

  /* Semantic */
  --color-success: #16a34a;        /* green-600 */
  --color-warning: #d97706;        /* amber-600 */
  --color-danger: #dc2626;         /* red-600 */
  --color-info: #2563eb;           /* blue-600 */

  /* Radius */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'Courier New', monospace;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Transition */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

/* Dark-mode overrides */
.dark {
  --color-surface: #0f172a;        /* slate-900 */
  --color-surface-muted: #1e293b;  /* slate-800 */
  --color-border: #334155;         /* slate-700 */
  --color-border-subtle: #1e293b;  /* slate-800 */

  --color-text-primary: #f1f5f9;   /* slate-100 */
  --color-text-secondary: #cbd5e1; /* slate-300 */
  --color-text-muted: #94a3b8;     /* slate-400 */
  --color-text-placeholder: #64748b; /* slate-500 */
}

/* Apply Inter globally */
html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}