/* ============================================================
   INSTALLMENTLOANONLINE.NET — DESIGN TOKENS  v1.0
   Direction: "KEYSTONE" — Architectural Trust.
   Cool limestone paper + deep petrol + terracotta action + brass detail.
   Metaphor: a blueprint / a load-bearing arch. Structure you can see.
   Hard NO: Fraunces, warm cream, pine green, amber, purple gradients,
   glassmorphism, neon, corporate baby-blue.
   ============================================================ */

:root {
  /* ---------- COLOR / CORE (cool stone, not warm cream) ---------- */
  --stone:        #EDEEEA;   /* page background — cool limestone, blueprint paper */
  --stone-deep:   #E2E4DD;   /* section alternation, table stripes */
  --paper:        #FBFCFA;   /* card / panel surface (never pure #FFF) */
  --ink:          #16201F;   /* primary text — cool near-black */
  --ink-soft:     #43504D;   /* secondary text */
  --ink-faint:    #828D89;   /* captions, meta, placeholders */
  --line:         #D3D6CD;   /* hairline borders, dividers (cool, not gray) */
  --line-strong:  #B7BCB1;

  /* ---------- COLOR / BRAND ---------- */
  --petrol:       #0E3A45;   /* primary brand — headers, links, footer, arches */
  --petrol-deep:  #082830;   /* hover, dark sections, footer */
  --petrol-mid:   #18525F;   /* secondary brand surfaces */
  --petrol-tint:  #DBE7E7;   /* light wash — info blocks, badges, table head text */

  /* ---------- COLOR / ACTION (terracotta — the only CTA color) ---------- */
  --clay:         #C75D3C;   /* CTA, highlights, marker underline, progress */
  --clay-deep:    #A8482C;   /* CTA hover */
  --clay-tint:    #F6E3D9;   /* highlight wash, key-takeaway boxes */

  /* ---------- COLOR / PREMIUM DETAIL ---------- */
  --brass:        #B08D57;   /* fine rules, stamps, premium accents, dividers */
  --brass-deep:   #8E6F3E;
  --brass-tint:   #EFE7D5;

  /* ---------- COLOR / FUNCTIONAL ---------- */
  --ok:           #2C7A57;
  --ok-tint:      #DDEFE5;
  --warn:         #B26B12;
  --warn-tint:    #FBEBD3;
  --danger:       #B23A2B;
  --danger-tint:  #F8E1DD;
  --focus-ring:   #C75D3C;   /* 3px outline, offset 2px */

  /* ---------- TYPOGRAPHY ---------- */
  /* Display grotesque: structural + characterful (NOT serif, NOT Inter).
     Body grotesque: warm, highly readable. Mono: figures, schedules. */
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-ui:      "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Geist Mono", "Consolas", ui-monospace, monospace;

  /* Fluid type scale (clamp 360px → 1280px) */
  --text-hero:    clamp(2.6rem, 1.3rem + 5.3vw, 4.75rem);  /* 42 → 76 */
  --text-h1:      clamp(2.15rem, 1.4rem + 3.1vw, 3.5rem);  /* 34 → 56 */
  --text-h2:      clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem);  /* 26 → 40 */
  --text-h3:      clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);   /* 21 → 27 */
  --text-h4:      1.1875rem;   /* 19 */
  --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.05;   /* display headings — tight, architectural */
  --leading-heading: 1.18;
  --leading-body:    1.65;
  --leading-legal:   1.55;

  --weight-display:  700;    /* Bricolage display headlines */
  --weight-black:    800;    /* hero only */
  --weight-bold:     700;
  --weight-semibold: 600;
  --weight-medium:   500;
  --weight-body:     400;

  --tracking-tight:  -0.02em;  /* large display */
  --tracking-label:  0.14em;   /* mono eyebrows / kickers, uppercased */

  /* ---------- 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:    1180px;
  --container-narrow: 720px;   /* article measure ≈ 68ch */
  --gutter:       clamp(1.5rem, 5vw, 2.75rem);

  /* ---------- SHAPE ---------- */
  --radius-sm:    7px;     /* inputs, tags */
  --radius-md:    14px;    /* cards, buttons */
  --radius-lg:    22px;    /* feature panels, calculator */
  /* Signature "keystone arch": full pill top, squared bottom */
  --radius-arch:  999px 999px 14px 14px;

  /* Signature shadow: cool, layered, architectural — never gray haze */
  --shadow-card:  0 1px 2px rgba(14,40,48,.05), 0 6px 18px rgba(14,40,48,.07);
  --shadow-pop:   0 2px 6px rgba(14,40,48,.08), 0 16px 40px rgba(14,40,48,.13);
  --shadow-press: inset 0 2px 5px rgba(14,40,48,.14);
  /* Signature CTA: hard architectural offset (no blur), petrol-ink */
  --shadow-offset: 4px 4px 0 0 var(--petrol);
  --shadow-offset-sm: 3px 3px 0 0 var(--petrol);

  /* Signature borders */
  --border-card:   1.5px solid var(--line);
  --border-strong: 2px solid var(--ink);
  --border-brass:  1px solid var(--brass);

  /* Blueprint grid (faint background lines) */
  --grid-line:    rgba(14,40,48,.05);
  --grid-size:    28px;

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(.2, .8, .3, 1);
  --ease-arch:    cubic-bezier(.34, 1.2, .42, 1);  /* slight overshoot for arches */
  --dur-fast:     140ms;
  --dur-base:     240ms;
  --dur-slow:     440ms;
  /* 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, dark hero) — inverted, still cool */
[data-theme="petrol"] {
  --stone: var(--petrol-deep);
  --stone-deep: #0b2026;
  --paper: #103740;
  --ink: #EDF1EF;
  --ink-soft: #AFC2C0;
  --ink-faint: #7E9694;
  --line: #1F4E58;
  --line-strong: #2C5F69;
  --petrol-tint: #14454F;
}