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

:root {
  /* Brand palette (AI Evolution) */
  --brand-gold: #e8b84d;  /* primary accent */
  --brand-blue: #4a90a4;  /* calm secondary */
  --brand-teal: #5d9b9b;  /* muted teal */
  --brand-ink: #2c2c2c;   /* neutral dark */
  --brand-bg: #fafaf8;    /* off-white */
  --brand-surface: #f7f7f5; /* warm gray */

  /* App tokens */
  --color-bg: var(--brand-bg);
  --color-surface: var(--brand-surface);
  --color-text: var(--brand-ink);
  --color-muted: #5b6472;
  --color-border: rgba(44, 44, 44, 0.14);

  /* Focus */
  --focus-ring: 3px solid rgba(232, 184, 77, 0.55);
  --focus-ring-offset: 3px;

  /* Typography */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

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

  /* Radius / Shadow */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.16);

  /* Bootstrap overrides (loaded after bootstrap.css in all pages) */
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-border-color: rgba(44, 44, 44, 0.14);

  --bs-primary: var(--brand-blue);
  --bs-secondary: var(--brand-teal);
  --bs-warning: var(--brand-gold);

  --bs-link-color: var(--brand-blue);
  --bs-link-hover-color: #3b7f92;

  /* Breakpoints (documentation tokens; CSS can’t use these directly without tooling) */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
}