/* ─── A Guide To — Design Tokens (Dark Theme) ─── */
/* Override --agt-primary and --agt-accent per city in city-tokens.css */

:root {
  /* ── Color Tokens (Dark Theme) ── */
  --agt-primary: #2c5f2d;
  --agt-primary-light: #3a7d3c;
  --agt-primary-dark: #1e4220;
  --agt-accent: #d4a03c;
  --agt-accent-light: #e2b85c;

  --agt-text: #eef3fb;
  --agt-text-light: #b0b8c8;
  --agt-text-muted: #7f8aa0;

  --agt-bg: #0a0d14;
  --agt-bg-warm: rgba(255, 255, 255, 0.03);
  --agt-bg-cool: rgba(255, 255, 255, 0.05);
  --agt-bg-dark: #060810;

  --agt-bg-card: rgba(255, 255, 255, 0.04);
  --agt-bg-card-hover: rgba(255, 255, 255, 0.07);

  --agt-border: rgba(255, 255, 255, 0.08);
  --agt-border-light: rgba(255, 255, 255, 0.05);

  --agt-success: #2d8a4e;
  --agt-warning: #d4a03c;
  --agt-error: #c0392b;

  --agt-white: #ffffff;
  --agt-black: #0d0d1a;
  --agt-text-inverse: rgba(255, 255, 255, 0.85);
  --agt-text-inverse-muted: rgba(255, 255, 255, 0.7);
  --agt-border-inverse: rgba(255, 255, 255, 0.1);

  /* ── Typography ── */
  --agt-font-heading: 'Outfit', system-ui, -apple-system, sans-serif;
  --agt-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --agt-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --agt-text-xs: 0.75rem;    /* 12px */
  --agt-text-sm: 0.875rem;   /* 14px */
  --agt-text-base: 1rem;     /* 16px */
  --agt-text-lg: 1.125rem;   /* 18px */
  --agt-text-xl: 1.25rem;    /* 20px */
  --agt-text-2xl: 1.5rem;    /* 24px */
  --agt-text-3xl: 1.875rem;  /* 30px */
  --agt-text-4xl: 2.25rem;   /* 36px */
  --agt-text-5xl: 3rem;      /* 48px */

  --agt-leading-tight: 1.2;
  --agt-leading-normal: 1.6;
  --agt-leading-relaxed: 1.8;

  --agt-weight-light: 300;
  --agt-weight-regular: 400;
  --agt-weight-medium: 500;
  --agt-weight-semibold: 600;
  --agt-weight-bold: 700;
  --agt-weight-extrabold: 800;

  /* ── Spacing (4px base grid) ── */
  --agt-space-1: 0.25rem;   /* 4px */
  --agt-space-2: 0.5rem;    /* 8px */
  --agt-space-3: 0.75rem;   /* 12px */
  --agt-space-4: 1rem;      /* 16px */
  --agt-space-5: 1.5rem;    /* 24px */
  --agt-space-6: 2rem;      /* 32px */
  --agt-space-7: 3rem;      /* 48px */
  --agt-space-8: 4rem;      /* 64px */

  /* ── Radius ── */
  --agt-radius-sm: 0.25rem;
  --agt-radius: 0.5rem;
  --agt-radius-lg: 0.75rem;
  --agt-radius-xl: 1rem;
  --agt-radius-full: 9999px;

  /* ── Shadow (lighter for dark bg) ── */
  --agt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --agt-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  --agt-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --agt-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);

  /* ── Transitions ── */
  --agt-transition: 200ms ease;
  --agt-transition-slow: 400ms ease;

  /* ── Layout ── */
  --agt-max-width: 1200px;
  --agt-content-width: 720px;
  --agt-sidebar-width: 320px;
}