@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  /* ── Aztronomic / EthosCompass shared canvas (matches main site) ── */
  --ink: #1a1528;
  --paper: #fafafa;
  --paper-warm: #fffdfb;
  --mist: #f3f1fa;
  --border: #e4dff0;

  --gradient-text: linear-gradient(105deg, #ff9e8a 0%, #e94e77 45%, #6a30d2 100%);
  --gradient-cta: linear-gradient(135deg, #6a30d2 0%, #e94e77 55%, #ff9e8a 100%);

  --deep: #1a0f2e;
  --deep-mid: #25143d;
  --deep-highlight: #3d2666;

  --socio: #6a30d2;
  --socio-light: #7c3aed;
  --socio-pale: #ede9fe;
  --socio-bg: #3b2666;

  --econ: #db2777;
  --econ-light: #e94e77;
  --econ-pale: #fce7f3;
  --econ-bg: #831843;

  --tech: #0d9488;
  --tech-light: #14b8a6;
  --tech-pale: #ccfbf1;
  --tech-bg: #134e4a;

  /* ── Methodology semantics (unchanged greens / warnings for tools) ── */
  --sage: #2d5016;
  --sage-light: #4a7c2a;
  --sage-pale: #d4e8c2;
  --amber: #c17f24;
  --amber-pale: #f5e6c8;
  --red: #be123c;
  --red-pale: #ffe4e6;
  --slate: #2c3e50;
  --slate-light: #e8edf2;
  --gold: #b8960c;

  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  --nav-height: 72px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-card: 0 2px 8px rgba(26, 21, 40, 0.04), 0 16px 48px rgba(106, 48, 210, 0.09);
  --shadow-card-hover: 0 4px 16px rgba(26, 21, 40, 0.06), 0 24px 56px rgba(106, 48, 210, 0.12);

  --ease: 0.25s ease;

  /* ── Claude Artifacts / tool page aliases ── */
  --font-sans: var(--font-body);

  --color-background-primary: #ffffff;
  --color-background-secondary: var(--mist);
  --color-background-danger: var(--red-pale);
  --color-background-success: var(--sage-pale);
  --color-background-warning: var(--amber-pale);
  --color-background-info: var(--slate-light);

  --color-text-primary: var(--ink);
  --color-text-secondary: #6b6280;
  --color-text-tertiary: #8b8399;
  --color-text-danger: var(--red);
  --color-text-success: var(--sage);
  --color-text-warning: #8a5a00;
  --color-text-info: var(--slate);

  --color-border-primary: var(--ink);
  --color-border-secondary: var(--border);
  --color-border-tertiary: #e8e4f0;
  --color-border-danger: #f9a8c4;
  --color-border-success: #86efac;
  --color-border-warning: #fcd34d;
  --color-border-info: #c4b5fd;

  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
}