/**
 * tokens.css — chatgpt-seo-audit design tokens, the single source of color values.
 * Emerald AI palette; body text on background meets WCAG AA 4.5:1.
 */

:root {

  --csa-bg: #f3f6f2;
  --csa-surface: #ffffff;
  --csa-text: #182019;
  --csa-text-secondary: #49574f;
  --csa-muted: #5d6a61;
  --csa-border: #dbe4dc;
  --csa-border-strong: #c2cfc4;
  --csa-backdrop: rgba(24, 32, 29, 0.4);

  --csa-accent: #0e7a5f;          /* on #fff ≈ 5.3:1 */
  --csa-accent-hover: #0a6249;
  --csa-accent-active: #084d39;
  --csa-accent-soft: #e0f2ea;     /* accent on soft ≈ 4.8:1 */
  --csa-on-accent: #ffffff;

  --csa-sev-p0-bg: #fbe9e6;  --csa-sev-p0-fg: #991f14;
  --csa-sev-p1-bg: #fbeed7;  --csa-sev-p1-fg: #7d4a08;
  --csa-sev-p2-bg: #f7f0cc;  --csa-sev-p2-fg: #5f5203;
  --csa-sev-p3-bg: #e1eff4;  --csa-sev-p3-fg: #155d7d;
  --csa-sev-info-bg: #edf0ec; --csa-sev-info-fg: #48524c;

  --csa-error: #a8221b;
  --csa-error-bg: #fbe9e6;
  --csa-success: #0e7a5f;
  --csa-success-bg: #e0f2ea;
  --csa-warning-bg: #fbeed7;

  --csa-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --csa-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --csa-text-xs: 0.75rem;
  --csa-text-sm: 0.875rem;
  --csa-text-base: 1rem;
  --csa-text-lg: 1.125rem;
  --csa-text-xl: 1.375rem;
  --csa-text-2xl: 1.75rem;
  --csa-text-3xl: clamp(2rem, 5vw, 2.625rem);
  --csa-leading-tight: 1.25;
  --csa-leading-base: 1.6;

  --csa-space-1: 4px;
  --csa-space-2: 8px;
  --csa-space-3: 12px;
  --csa-space-4: 16px;
  --csa-space-5: 20px;
  --csa-space-6: 24px;
  --csa-space-7: 32px;
  --csa-space-8: 48px;
  --csa-space-9: 64px;

  --csa-radius-sm: 6px;
  --csa-radius-md: 10px;
  --csa-radius-lg: 16px;
  --csa-radius-pill: 999px;

  --csa-shadow-sm: 0 1px 2px rgba(20, 34, 26, 0.06);
  --csa-shadow-md: 0 4px 16px rgba(20, 34, 26, 0.08);
  --csa-shadow-lg: 0 12px 32px rgba(20, 34, 26, 0.12);

  --csa-motion-fast: 150ms;
  --csa-motion-base: 200ms;
  --csa-motion-slow: 250ms;
  --csa-motion-ease: cubic-bezier(0.2, 0.6, 0.3, 1);

  --csa-maxw: 920px;
  --csa-focus-ring: 0 0 0 3px rgba(14, 122, 95, 0.35);
  --csa-z-banner: 50;
  --csa-z-toast: 60;
}