/* ==========================================================================
   WOW Loans Design System — "Main Street"
   tokens.css — design tokens (single source of truth)
   v1.0 — 2026-06
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     COLOR — warm, grounded, no gradients.
     Inspired by paper ledgers, brass fixtures and small-town banks,
     not by SaaS dashboards.
     -------------------------------------------------------------------- */

  /* Core neutrals (warm-tinted, never pure #000/#fff) */
  --wow-ink:          #23211B;  /* primary text, borders, icons */
  --wow-ink-soft:     #57534A;  /* secondary text */
  --wow-ink-faint:    #8A857A;  /* placeholders, captions */
  --wow-paper:        #FAF6EE;  /* page background */
  --wow-paper-raised: #FFFDF8;  /* cards, inputs */
  --wow-paper-sunken: #F1EBDF;  /* table stripes, wells */

  /* Brand */
  --wow-pine:         #1C4633;  /* primary brand: deep pine green */
  --wow-pine-hover:   #163A2A;
  --wow-pine-tint:    #E4EDE5;  /* pine at ~10% on paper */
  --wow-marigold:     #E9A13B;  /* action accent: marigold */
  --wow-marigold-hover:#D88F26;
  --wow-marigold-tint:#FBEED7;

  /* Support */
  --wow-clay:         #B95C38;  /* warnings, APR highlights, urgency */
  --wow-clay-tint:    #F6E3DA;
  --wow-river:        #2E5E66;  /* links inside text, info */
  --wow-river-tint:   #E0EBEC;
  --wow-moss:         #6C7F5A;  /* success */
  --wow-moss-tint:    #E9EEE2;

  /* Semantic aliases */
  --wow-bg:           var(--wow-paper);
  --wow-surface:      var(--wow-paper-raised);
  --wow-text:         var(--wow-ink);
  --wow-text-muted:   var(--wow-ink-soft);
  --wow-link:         var(--wow-river);
  --wow-success:      var(--wow-moss);
  --wow-warning:      var(--wow-clay);
  --wow-focus-ring:   var(--wow-marigold);

  /* --------------------------------------------------------------------
     TYPOGRAPHY
     Display: "Fraunces" — warm optical serif with personality.
     Text/UI: "Instrument Sans" — neutral grotesque, NOT Inter.
     Numbers in rates/tables: tabular lining figures.
     -------------------------------------------------------------------- */

  --wow-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --wow-font-text:    "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  /* Fluid type scale (clamp: mobile -> desktop) */
  --wow-text-xs:   0.8125rem;                            /* 13px captions, legal */
  --wow-text-sm:   0.9375rem;                            /* 15px secondary */
  --wow-text-base: 1.0625rem;                            /* 17px body */
  --wow-text-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);   /* lead */
  --wow-text-xl:   clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);   /* h3 */
  --wow-text-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem);   /* h2 */
  --wow-text-3xl:  clamp(2.375rem, 1.8rem + 2.8vw, 3.5rem);    /* h1 / hero */

  --wow-leading-tight: 1.12;
  --wow-leading-snug:  1.3;
  --wow-leading-body:  1.6;

  --wow-tracking-tight: -0.015em;  /* display sizes */
  --wow-tracking-wide:  0.08em;    /* overlines, badges */

  /* --------------------------------------------------------------------
     SPACING — 4px base grid
     -------------------------------------------------------------------- */

  --wow-space-1:  0.25rem;
  --wow-space-2:  0.5rem;
  --wow-space-3:  0.75rem;
  --wow-space-4:  1rem;
  --wow-space-5:  1.5rem;
  --wow-space-6:  2rem;
  --wow-space-7:  3rem;
  --wow-space-8:  4.5rem;
  --wow-space-9:  7rem;

  --wow-container:       72rem;   /* 1152px */
  --wow-container-text:  44rem;   /* long-form reading width */
  --wow-gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* --------------------------------------------------------------------
     SHAPE — the signature. Hard offset shadows, 2px ink borders,
     asymmetric "ticket" radius. No blur-glow, no glassmorphism.
     -------------------------------------------------------------------- */

  --wow-radius-sm:  0.375rem;                 /* inputs, badges */
  --wow-radius-md:  0.75rem;                  /* cards */
  --wow-radius-lg:  1.25rem;                  /* hero panels */
  --wow-radius-tab: 0.75rem 0.75rem 0.75rem 0.125rem; /* signature "ticket" corner */
  --wow-radius-pill: 999px;

  --wow-border:        1.5px solid var(--wow-ink);
  --wow-border-soft:   1px solid rgba(35, 33, 27, 0.16);

  /* Hard offset shadows — paper-cut feel, zero blur */
  --wow-shadow-sm: 2px 2px 0 0 var(--wow-ink);
  --wow-shadow-md: 4px 4px 0 0 var(--wow-ink);
  --wow-shadow-lg: 6px 6px 0 0 var(--wow-ink);
  --wow-shadow-accent: 4px 4px 0 0 var(--wow-marigold);

  /* --------------------------------------------------------------------
     MOTION — quick and physical, never floaty
     -------------------------------------------------------------------- */

  --wow-ease-out:   cubic-bezier(0.2, 0.8, 0.3, 1);
  --wow-duration-fast: 120ms;
  --wow-duration-base: 200ms;

  /* --------------------------------------------------------------------
     Z-INDEX
     -------------------------------------------------------------------- */
  --wow-z-header:  100;
  --wow-z-overlay: 200;
  --wow-z-modal:   300;
}

/* Dark contexts (footer, pine panels) — re-mapped tokens */
.wow-theme-dark {
  --wow-bg:         var(--wow-pine);
  --wow-surface:    #225239;
  --wow-text:       #F4EFE4;
  --wow-text-muted: #C8CFC0;
  --wow-link:       var(--wow-marigold);
  --wow-border:     1.5px solid rgba(244, 239, 228, 0.85);
  --wow-shadow-sm:  2px 2px 0 0 rgba(0, 0, 0, 0.45);
  --wow-shadow-md:  4px 4px 0 0 rgba(0, 0, 0, 0.45);
}