/**
 * Accounts Clarity — Design Tokens
 * Source: design/accounts-clarity/design-system/tokens/*.css (Claude Design handoff, 2026-07-08).
 * Fonts (Playfair Display, Inter) are loaded via Google Fonts in functions.php — no @font-face here.
 */

:root {
  /* ── Color — base palette ─────────────────────────────────────────────── */
  --ac-navy-900: #0A2540;
  --ac-navy-800: #123354;
  --ac-navy-700: #1C4468;
  --ac-teal-600: #4A8886;
  --ac-teal-500: #5F9B9A;
  --ac-teal-400: #7FB0AF;
  --ac-mint-200: #DCEAE8;
  --ac-mint-100: #EEF5F4;
  --ac-gray-100: #F2F4F5;
  --ac-white: #FFFFFF;

  --ac-ink-900: #111827;
  --ac-ink-700: #3F4A54;
  --ac-ink-500: #6B7680;
  --ac-ink-300: #C7D0D4;
  --ac-ink-200: #E3E8EA;

  /* ── Color — semantic aliases ─────────────────────────────────────────── */
  --color-bg-page: var(--ac-white);
  --color-bg-section-tint: var(--ac-mint-100);
  --color-bg-section-neutral: var(--ac-gray-100);
  --color-bg-inverse: var(--ac-navy-900);

  --color-text-heading: var(--ac-navy-900);
  /* Body copy is navy, not grey. Sampled from Ewa's design file: the glyph
     cores of the hero sub-copy come out at #0B2143 — i.e. navy-900, the same
     family as the headings. The canonical handoff's neutral ink is a lighter
     grey that does not match what she drew. */
  --color-text-body: var(--ac-navy-800);
  --color-text-muted: var(--ac-navy-700);
  --color-text-inverse: var(--ac-white);
  --color-text-accent: var(--ac-teal-500);

  --color-brand-primary: var(--ac-navy-900);
  --color-brand-accent: var(--ac-teal-500);
  --color-brand-accent-hover: var(--ac-teal-600);
  --color-brand-accent-tint: var(--ac-mint-200);

  --color-border-subtle: var(--ac-ink-200);
  --color-border-default: var(--ac-ink-300);
  --color-border-accent: var(--ac-teal-400);

  --color-cta-bg: var(--ac-teal-500);
  --color-cta-bg-hover: var(--ac-teal-600);
  --color-cta-text: var(--ac-white);

  --color-focus-ring: var(--ac-teal-400);

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --text-display-xl: 600 clamp(2.6rem, 4vw, 3.6rem)/1.1 var(--font-display);
  --text-display-lg: 600 clamp(2rem, 3vw, 2.6rem)/1.15 var(--font-display);
  --text-display-md: 500 1.75rem/1.25 var(--font-display);
  --text-display-sm: 500 1.375rem/1.3 var(--font-display);

  --text-body-lg: 400 1.125rem/1.6 var(--font-body);
  --text-body-md: 400 1rem/1.6 var(--font-body);
  --text-body-sm: 400 0.875rem/1.5 var(--font-body);
  --text-label: 600 0.75rem/1.4 var(--font-body);

  --letter-spacing-label: 0.08em;

  /* Optical tracking. Ewa's lettering sits tight; Inter and Playfair both ship
     looser than her file reads, so pull them in globally. */
  --tracking-body: -0.011em;
  --tracking-display: -0.03em;

  /* ── Spacing / radius / shadow ────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-button: 10px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06);
  --shadow-md: 0 4px 16px rgba(10, 37, 64, 0.08);
  --shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.12);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-standard: 250ms;

  /* Ewa's design runs a narrow content column — 63.8% of her artboard (689 of
     1080). 1200px read too wide and loose against her file; a literal 910px
     cramped the wider rows. 1100px holds her proportion at common desktop
     widths while the trusted-by row (needs ~1000px) still fits on one line. */
  --container-max: 1100px;
}