/* TapLoop design tokens — single source of truth for color + type.
   Locked 2026-06-11 with the rebrand + Path B accessibility variants.
   See TAPLOOP_MASTER_REFERENCE.md "Design System" section. */

:root {
  /* Surfaces (page + card backgrounds) */
  --surface-page:        #EAE4DA;     /* cream — primary page bg */
  --surface-card:        #E0D4C2;     /* taupe — cards, sections */
  --surface-deep:        #E0D4C2;     /* same as card (3 old tones → 2 new) */
  --surface-input:       #FFFFFF;     /* white — input fields */
  --surface-elevated:    #FFFFFF;     /* white — cards, dialog backgrounds, elevated surfaces */
  --surface-danger-tint: #FDF4F2;
  --surface-info-tint:   #B3D9DB;     /* new teal tint */
  --surface-overlay:     rgba(35,31,32,0.5);  /* modal backdrop */

  /* Text */
  --text-primary:        #231F20;     /* espresso-black — body text, 12.4:1 on cream (AAA) */
  --text-on-accent:      #FFFFFF;     /* white on slate buttons — 5.5:1 on slate (AA) */
  --text-muted:          rgba(35,31,32,0.55);  /* muted body text — subtitles, captions */
  --text-placeholder:    rgba(35,31,32,0.4);   /* input placeholders */

  /* Borders */
  --border-default:      rgba(35,31,32,0.25);  /* warm subtle border — passes 3:1 UI threshold */
  --border-subtle:       rgba(35,31,32,0.1);
  --border-accent:       #496E83;     /* slate-blue border for emphasized elements */

  /* Accents — brand colors */
  --accent-primary:      #496E83;     /* slate-blue deep — buttons, headlines, fills, large text */
  --accent-primary-text: #385570;     /* DEEPER slate for body-text links — 6.0:1 on cream (AA) */
  --accent-secondary:    #7E688C;     /* plum deep — secondary buttons + fills */
  --accent-secondary-text:#5F4E72;    /* DEEPER plum for body-text accent — 5.5:1 on cream (AA) */
  --accent-secondary-mid:#B3B3D9;     /* plum light — decorative tint */
  --accent-sage:         #77B877;     /* sage deep — positive accent fills */
  --accent-sage-light:   #ADD998;     /* sage tint */

  /* Status — functional colors stay across rebrand */
  --status-danger:       #B03020;     /* red — 5.0:1 on cream (AA) */
  --status-success:      #2D7A4F;     /* green — 4.14:1 on cream (large/UI only) */
  --status-success-text: #256B43;     /* DEEPER green for small body text — 5.1:1 on cream (AA) */
  --status-warning:      #E8C547;
  --status-coral:        #DBA89E;

  /* Type — disciplined two-family system. Locked 2026-06-13 (Fraunces retired
     in favor of Source Serif 4 after the wonky-f problem couldn't be resolved
     via WONK/SOFT axes; Source Serif 4 has a conventional f, optical-size
     awareness, and matches Inter cleanly as an Adobe-pedigree contemporary
     pairing).
     --font-display: Source Serif 4 — RARE. Public-facing first-impression
       surfaces only: homepage hero, marketing pages on taploop.net, claim/
       vcard/intercept/update page heroes, portal-login.html title. NEVER
       inside the portal UI, admin UI, kiosk, or generator — those are working
       surfaces, not editorial moments.
     --font-body: Inter — DEFAULT. Body text, buttons, labels, form fields, AND
       all in-app headings (portal h2/h3, admin tabs, settings). When in doubt,
       use --font-body. The brand's serif character lives in the SVG logos +
       hero moments; everything else stays sans for cohesion with the
       condensed TAP/LOOP wordmark. */
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-body:    'Inter', system-ui, Helvetica, Arial, sans-serif;
}