/* ============================================================
   JNG Tax & Advisory — Design Tokens (single source of truth)
   Generated 2026-08-25 from an audit of 30 site pages.
   Replaces 71 ad-hoc CSS vars (23 in conflict) and 146 hex colors.

   Two themes, one system:
     [data-brand="consumer"]     — jngtaxadvisory.com retail tax + advisory
     [data-brand="professional"] — firm-facing product suite (accountants,
                                   bookkeepers, advisors)
   Both share type, spacing, radii, motion. Only surface/ink/accent differ.
   ============================================================ */

:root {
  /* ---- Type ---- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.35vw, 1.37rem);
  --step-2:  clamp(1.44rem, 1.33rem + 0.57vw, 1.73rem);
  --step-3:  clamp(1.73rem, 1.55rem + 0.88vw, 2.18rem);
  --step-4:  clamp(2.07rem, 1.81rem + 1.32vw, 2.75rem);
  --step-5:  clamp(2.49rem, 2.10rem + 1.94vw, 3.47rem);

  --leading-tight: 1.15;
  --leading-body: 1.65;
  --tracking-eyebrow: 0.08em;

  /* ---- Space (4px base) ---- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;    --space-9: 6rem;

  /* ---- Radius / elevation / motion ---- */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15, 36, 64, 0.06);
  --shadow-2: 0 4px 14px rgba(15, 36, 64, 0.10);
  --shadow-3: 0 18px 44px rgba(15, 36, 64, 0.16);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms; --dur-base: 220ms;

  --container: 1140px;
  --measure: 68ch;

  /* ---- Semantic status (shared, brand-independent) ----
     The bare tokens below are FILL colors. Measured as text they are
     2.54:1 (ok), 3.19:1 (warn), 4.83:1 (err) on white — ok and warn
     fail AA outright. Never set `color:` from them directly; use the
     per-skin --*-text tokens further down, which resolve to the dark
     -ink values on the light skin and to light values on the dark
     skin. --info was #3b7bbf (4.40:1 on white) and failed AA as the
     link-hover color; corrected to #33699f (5.73:1). */
  --ok:      #10b981;
  --ok-ink:  #065f46;   /* 7.68:1 on white */
  --warn:    #d97706;
  --warn-ink:#92400e;   /* 7.09:1 on white */
  --err:     #dc2626;
  --err-ink: #991b1b;   /* 8.31:1 on white */
  --info:    #33699f;   /* 5.73:1 on white, 5.41:1 on cream */
}

/* ============ CONSUMER — retail tax & advisory ============ */
:root,
[data-brand="consumer"] {
  --brand-navy:        #1e3a5f;
  --brand-navy-dark:   #0f2440;
  --brand-navy-light:  #2d5a8a;
  --brand-gold:        #c9a227;
  --brand-gold-soft:   #f3e5ab;

  --surface:           #ffffff;
  --surface-sunken:    #faf8f5;   /* cream */
  --surface-raised:    #ffffff;
  --surface-inverse:   #0f2440;

  --ink:               #2a2a2a;
  --ink-muted:         #525252;
  --ink-faint:         #6e6e6e;   /* 5.10:1 on white, 4.81:1 on cream.
                                     Was #767676, which measures 4.28:1 on
                                     cream and fails AA for small text. */
  --ink-inverse:       #f5f7fa;

  /* Status as TEXT on light surfaces — see the note in :root above. */
  --ok-text:           var(--ok-ink);
  --warn-text:         var(--warn-ink);
  --err-text:          var(--err-ink);
  --info-text:         var(--info);

  /* ---- Soft status fills + chart series ----
     These are read at RUNTIME by the planner/goal pages, which build
     their charts in JS. Custom properties consumed via
     getComputedStyle().getPropertyValue() must hold a directly
     assignable value, so these are concrete colors rather than
     color-mix() expressions. */
  --ok-soft:           #dcfce7;
  --warn-soft:         #ffedd5;
  --err-soft:          #fef2f2;
  --violet:            #7c3aed;   /* 5.70:1 on white — passes as text. Kept
                                     as-is; it is one chart series among six,
                                     not the page accent. */
  --violet-soft:       #f3e8ff;

  --line:              #e0e0e0;
  --line-strong:       #c9ced6;

  --action:            var(--brand-navy);
  --action-hover:      var(--brand-navy-dark);
  --action-ink:        #ffffff;
  --accent:            var(--brand-gold);
  --accent-ink:        #3d3007;

  --focus-ring:        0 0 0 3px rgba(30, 58, 95, 0.35);
}

/* ============ PROFESSIONAL — firm-facing product suite ============ */
[data-brand="professional"] {
  --brand-navy:        #152238;
  --brand-navy-dark:   #070b12;
  --brand-navy-light:  #2c3e50;
  --brand-gold:        #d4a843;
  --brand-gold-soft:   #f3e5ab;

  --surface:           #0b1220;
  --surface-sunken:    #070b12;
  --surface-raised:    rgba(28, 44, 76, 0.65);
  --surface-inverse:   #f7f9fc;

  --ink:               #eef2f8;
  --ink-muted:         #b6c1d2;
  --ink-faint:         #8d9bb0;   /* 6.64:1 on #0b1220 — AA small text */
  --ink-inverse:       #0f2440;

  /* Status as TEXT on dark surfaces. The light-skin -ink values are
     near-black and would vanish here, so this skin overrides them. */
  --ok-text:           #34d399;   /* 9.74:1 on #0b1220 */
  --warn-text:         #fbbf24;   /* 11.22:1 */
  --err-text:          #f87171;   /* 6.77:1 */
  --info-text:         #7dafdc;   /* 8.06:1 */

  /* Soft fills invert on a dark surface — a pale tint would read as a
     bright block here, so these are low-alpha washes of the same hue. */
  --ok-soft:           rgba(52, 211, 153, 0.14);
  --warn-soft:         rgba(251, 191, 36, 0.14);
  --err-soft:          rgba(248, 113, 113, 0.14);
  --violet:            #a78bfa;   /* 7.68:1 on #0b1220 */
  --violet-soft:       rgba(167, 139, 250, 0.14);

  --line:              rgba(255, 255, 255, 0.10);
  --line-strong:       rgba(255, 255, 255, 0.22);

  --action:            var(--brand-gold);
  --action-hover:      #e6bd5c;
  --action-ink:        #241a02;
  --accent:            #3b82f6;
  --accent-ink:        #eaf2ff;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 22px 56px rgba(0, 0, 0, 0.55);
  --focus-ring: 0 0 0 3px rgba(212, 168, 67, 0.45);
}

/* Respect the viewer's theme on brand-neutral embeds only. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}