/* ============================================================
   LOAN-PAYDAY.COM — DESIGN TOKENS  v1.0
   Direction: "Warm Ledger" — editorial fintech.
   Paper warmth + pine green trust + amber action.
   No purple gradients, no glassmorphism, no neon.
   ============================================================ */

:root {
  /* ---------- COLOR / CORE ---------- */
  --paper:        #FAF6EF;   /* page background — warm paper, not white */
  --paper-deep:   #F1EADD;   /* section alternation, table stripes */
  --ink:          #1C2420;   /* primary text — warm near-black, never #000 */
  --ink-soft:     #4A5550;   /* secondary text */
  --ink-faint:    #8B948E;   /* captions, meta, placeholders */
  --line:         #DDD2BF;   /* hairline borders, dividers */

  /* ---------- COLOR / BRAND ---------- */
  --pine:         #114B3C;   /* primary brand — headers, links, footer bg */
  --pine-deep:    #0B342A;   /* hover, dark sections */
  --pine-tint:    #E3EDE7;   /* light green wash — info blocks, badges */
  --amber:        #F0A93B;   /* CTA, highlights, progress */
  --amber-deep:   #D98F1F;   /* CTA hover */
  --amber-tint:   #FBEED3;   /* highlight wash, key-takeaway boxes */

  /* ---------- COLOR / FUNCTIONAL ---------- */
  --ok:           #2E7D4F;
  --ok-tint:      #E2F2E7;
  --warn:         #B3590A;
  --warn-tint:    #FDEBD7;
  --danger:       #B3362B;
  --danger-tint:  #F9E3E0;
  --focus-ring:   #F0A93B;   /* 3px outline, offset 2px */

  /* ---------- TYPOGRAPHY ---------- */
  /* Display serif: character + editorial trust. UI sans: clarity.
     Mono: numbers, APR, ledger feel. */
  --font-display: "Fraunces", "Georgia", serif;          /* H1-H3, pull quotes, big numbers */
  --font-ui:      "Public Sans", "Segoe UI", sans-serif; /* body, nav, forms, buttons */
  --font-mono:    "Spline Sans Mono", "Consolas", monospace; /* amounts, rates, tables, dates */

  /* Fluid type scale (clamp 360px → 1280px) */
  --text-hero:    clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);   /* 40 → 72 */
  --text-h1:      clamp(2.1rem, 1.4rem + 3vw, 3.5rem);     /* 34 → 56 */
  --text-h2:      clamp(1.6rem, 1.2rem + 1.7vw, 2.375rem); /* 26 → 38 */
  --text-h3:      clamp(1.3rem, 1.1rem + 0.8vw, 1.625rem); /* 21 → 26 */
  --text-h4:      1.125rem;                                 /* 18 */
  --text-body-lg: 1.1875rem;  /* 19 — article body */
  --text-body:    1.0625rem;  /* 17 — default body */
  --text-sm:      0.9375rem;  /* 15 — meta, captions */
  --text-xs:      0.8125rem;  /* 13 — legal, labels */

  --leading-tight:   1.12;  /* display headings */
  --leading-heading: 1.25;
  --leading-body:    1.65;
  --leading-legal:   1.55;

  --weight-display:  580;   /* Fraunces variable — slightly off-bold = character */
  --weight-bold:     700;
  --weight-medium:   550;
  --weight-body:     400;

  /* Fraunces variable axes for display text (uniqueness lever):
     font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 80; */

  /* ---------- SPACING (8pt base) ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --section-y:    clamp(3.5rem, 2rem + 6vw, 7rem);
  --container:    1200px;
  --container-narrow: 760px;   /* article measure ≈ 70ch */
  --gutter:       clamp(1rem, 4vw, 2rem);

  /* ---------- SHAPE ---------- */
  --radius-sm:    6px;     /* inputs, tags */
  --radius-md:    12px;    /* cards, buttons */
  --radius-lg:    20px;    /* feature panels, calculator */
  --radius-stamp: 50% 50% 50% 50% / 60% 60% 40% 40%; /* stamp badges */

  /* Signature shadow: tight + warm, never blurry gray haze */
  --shadow-card:  0 1px 2px rgba(28,36,32,.06), 0 4px 14px rgba(28,36,32,.07);
  --shadow-pop:   0 2px 4px rgba(28,36,32,.08), 0 12px 32px rgba(28,36,32,.12);
  --shadow-press: inset 0 2px 4px rgba(28,36,32,.12);

  /* Signature border: 1.5px ink-tinted, not gray */
  --border-card:  1.5px solid var(--line);
  --border-strong: 2px solid var(--ink);

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(.22, .8, .36, 1);
  --dur-fast:     140ms;
  --dur-base:     240ms;
  --dur-slow:     420ms;
  /* Rule: motion = opacity/transform only. Respect prefers-reduced-motion. */

  /* ---------- Z-INDEX ---------- */
  --z-sticky: 40; --z-dropdown: 60; --z-modal: 80; --z-toast: 100;
}

/* Dark sections (footer, pre-footer CTA) — inverted, still warm */
[data-theme="pine"] {
  --paper: var(--pine-deep);
  --ink: #F3EFE6;
  --ink-soft: #B9C7C0;
  --line: #2B5A4B;
}