/* ═══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — A2ZDocs
   Single source of truth for all visual decisions.
   Every value in style.css should reference a token from this file.

   Usage in HTML:  class="..." (Tailwind) or inline style="color:var(--color-text-body)"
   Usage in CSS:   color: var(--color-text-body);
   ═══════════════════════════════════════════════════════════════════════ */

:root {

  /* ─── COLOR: Brand (Blue — primary action color) ───────────────────── */
  --color-brand-50:   #eff6ff;
  --color-brand-100:  #dbeafe;
  --color-brand-200:  #bfdbfe;
  --color-brand-300:  #93c5fd;
  --color-brand-400:  #60a5fa;
  --color-brand-500:  #3b82f6;
  --color-brand-600:  #2563eb;   /* PRIMARY CTA — use for buttons, links */
  --color-brand-700:  #1d4ed8;   /* hover state of primary */
  --color-brand-800:  #1e40af;
  --color-brand-900:  #1e3a8a;   /* dark backgrounds */

  /* ─── COLOR: Accent (Violet — secondary only, sparingly) ───────────── */
  /* Rule: accent appears in gradients + decorative icons only.
     Never use as a solo CTA color — brand-600 owns that role. */
  --color-accent-400: #a78bfa;
  --color-accent-500: #8b5cf6;
  --color-accent-600: #7c3aed;

  /* ─── COLOR: Neutral (Slate) ───────────────────────────────────────── */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;

  /* ─── COLOR: Semantic states ───────────────────────────────────────── */
  --color-success:         #10b981;
  --color-success-bg:      #ecfdf5;
  --color-success-border:  #a7f3d0;
  --color-success-text:    #065f46;

  --color-warning:         #d97706;   /* darkened from #f59e0b for AA contrast */
  --color-warning-bg:      #fffbeb;
  --color-warning-border:  #fde68a;
  --color-warning-text:    #92400e;

  --color-error:           #dc2626;   /* darkened from #ef4444 for AA contrast */
  --color-error-bg:        #fef2f2;
  --color-error-border:    #fecaca;
  --color-error-text:      #7f1d1d;

  --color-info:            var(--color-brand-600);
  --color-info-bg:         var(--color-brand-50);
  --color-info-border:     var(--color-brand-200);
  --color-info-text:       var(--color-brand-800);

  /* ─── COLOR: Surface ───────────────────────────────────────────────── */
  --color-bg:              #f0f4ff;   /* page-level background */
  --color-surface:         #ffffff;   /* cards, panels, modals */
  --color-surface-alt:     #f8faff;   /* inputs, subtle areas */
  --color-border:          #e2e8f0;   /* default border */
  --color-border-focus:    var(--color-brand-600);
  --color-border-brand:    var(--color-brand-200);

  /* ─── COLOR: Text ──────────────────────────────────────────────────── */
  --color-text-primary:    #0f172a;   /* headings — 16:1 on white */
  --color-text-body:       #1e293b;   /* body text — 14:1 on white */
  --color-text-secondary:  #475569;   /* labels, subtext — 7.5:1 on white ✓ */
  --color-text-muted:      #64748b;   /* captions ≥14px only — 4.6:1 on white ✓ */
  --color-text-placeholder: #94a3b8;  /* placeholder only, not for content */
  --color-text-disabled:   #cbd5e1;
  --color-text-on-brand:   #ffffff;
  --color-text-inverse:    #f1f5f9;

  /* ─── COLOR: Dark surface (hero, stats bar, footer) ────────────────── */
  --color-dark-bg:         #0f172a;
  --color-dark-surface:    #1e293b;
  --color-dark-border:     rgba(255,255,255,0.10);
  --color-dark-text:       #f1f5f9;   /* primary on dark — 14.5:1 on #0f172a ✓ */
  --color-dark-muted:      #bfdbfe;   /* muted on dark — 5.1:1 on #1e3a8a ✓ AA */
  /* NOTE: #94a3b8 on #1e3a8a = 3.5:1 — FAILS AA. Use --color-dark-muted instead. */

  /* ─── TYPOGRAPHY ───────────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Scale — minimum enforced sizes:
     body: --text-base (16px)
     instructions/labels: --text-sm (14px)
     captions: --text-xs (12px) — only for non-critical decorative labels */
  --text-xs:   0.75rem;    /* 12px — badges, decorative labels only */
  --text-sm:   0.875rem;   /* 14px — minimum for instructions / option labels */
  --text-base: 1rem;       /* 16px — body */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;
  --font-black:     900;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ─── SPACING (4px base scale) ─────────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;    /*  4px */
  --space-2:  0.5rem;     /*  8px */
  --space-3:  0.75rem;    /* 12px */
  --space-4:  1rem;       /* 16px */
  --space-5:  1.25rem;    /* 20px */
  --space-6:  1.5rem;     /* 24px */
  --space-8:  2rem;       /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-14: 3.5rem;     /* 56px */
  --space-16: 4rem;       /* 64px */

  /* ─── BORDER RADIUS ────────────────────────────────────────────────── */
  --radius-xs:   0.25rem;  /*  4px */
  --radius-sm:   0.5rem;   /*  8px */
  --radius-md:   0.75rem;  /* 12px */
  --radius-lg:   1rem;     /* 16px — default card */
  --radius-xl:   1.25rem;  /* 20px */
  --radius-2xl:  1.5rem;   /* 24px */
  --radius-full: 9999px;   /* pill / badge */

  /* ─── SHADOWS ──────────────────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 16px rgba(37,99,235,0.10);
  --shadow-lg:    0 12px 40px rgba(37,99,235,0.14);
  --shadow-xl:    0 20px 60px rgba(37,99,235,0.18);
  --shadow-focus: 0 0 0 3px rgba(37,99,235,0.25);
  --shadow-card:  0 2px 8px rgba(0,0,0,0.06), 0 0 0 1.5px #e8eeff;

  /* ─── MOTION ───────────────────────────────────────────────────────── */
  /* Rule: max 300ms for UI interactions. 150ms for micro. No bounce easing. */
  --motion-fast:    150ms;
  --motion-default: 200ms;
  --motion-slow:    300ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);   /* material standard */
  --ease-out:     cubic-bezier(0.0, 0, 0.2, 1);   /* entrances */
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);     /* exits */
  /* FORBIDDEN: cubic-bezier(.34,1.56,.64,1) — this is a spring/bounce curve */

  --transition-fast:    var(--motion-fast)    var(--ease-default);
  --transition-default: var(--motion-default) var(--ease-default);
  --transition-slow:    var(--motion-slow)    var(--ease-default);

  /* ─── Z-INDEX ───────────────────────────────────────────────────────── */
  --z-base:     1;
  --z-sticky:   10;
  --z-nav:      50;
  --z-dropdown: 100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;

  /* ─── COMPONENT MINIMUMS (WCAG touch targets) ──────────────────────── */
  --min-touch: 44px;    /* all tap targets ≥ 44×44px on mobile */
  --btn-height:    44px;
  --btn-height-sm: 36px;   /* use only for desktop-only contexts */
  --input-height:  44px;

  /* ─── BACKWARD COMPAT — map legacy var names used in style.css ──────── */
  /* These keep existing style.css working without a find-replace pass */
  --brand-50:  var(--color-brand-50);
  --brand-100: var(--color-brand-100);
  --brand-400: var(--color-brand-400);
  --brand-500: var(--color-brand-500);
  --brand-600: var(--color-brand-600);
  --brand-700: var(--color-brand-700);
  --brand-800: var(--color-brand-800);
  --accent:    #f59e0b;            /* kept as-is; semantic = --color-warning */
  --accent2:   var(--color-accent-500);
  --success:   var(--color-success);
  --danger:    var(--color-error);
  --glass-bg:  rgba(255,255,255,0.15);
  --glass-border: rgba(255,255,255,0.25);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-xl);
  --radius:    var(--radius-lg);
  /* NOTE: legacy --radius-sm mapped to --radius-md (12px, not 8px) to
     preserve existing visual rounding. Use --radius-sm for tighter rounding. */
  --transition: var(--motion-slow) var(--ease-default);
}

/* ═══════════════════════════════════════════════════════════════════════
   REDUCED MOTION — applies globally. All animations respect this.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:         0.01ms !important;
    animation-iteration-count:  1      !important;
    transition-duration:        0.01ms !important;
    scroll-behavior:            auto   !important;
  }
}