/* ============================================================
   GREAT PLAINS LENDING — DESIGN TOKENS  v1.0
   Direction: "MERIDIAN" — Quiet-Luxury, Cool Porcelain Light.
   Cool porcelain paper + deep indigo-slate brand + burnished
   copper action. Generous white space, hairline copper rules.
   Metaphor: a meridian line across an open plain — a precise
   horizon, a calm instrument, a private bank that happens to
   be approachable.
   ------------------------------------------------------------
   Hard NO (so we never echo the sibling sites):
     • Fraunces / warm cream paper / pine green / amber-marigold
       (that's loan-payday + wow-loans)
     • petrol + terracotta + brass / Bricolage display
       (that's installmentloanonline "Keystone")
     • dark navy + orange dark hero (the old GPL rebrand)
     • purple gradients, glassmorphism, neon, drop-shadow haze,
       hard brutalist offsets, AI-generic baby-blue.
   ============================================================ */

:root {
  /* ---------- COLOR / CORE (cool porcelain, never warm cream) ---------- */
  --canvas:        #F3F4F2;   /* page background — cool porcelain */
  --canvas-sink:   #ECEEEB;   /* alternating sections, subtle wells */
  --surface:       #FCFCFB;   /* default card / panel surface */
  --surface-pure:  #FFFFFF;   /* crisp white — used sparingly for lift */
  --ink:           #1B2228;   /* primary text — cool near-black */
  --ink-soft:      #4A535B;   /* secondary text, body on light */
  --ink-faint:     #8B939A;   /* captions, meta, placeholders */
  --line:          #DEE1DD;   /* hairline borders, dividers (cool) */
  --line-strong:   #C5C9C3;   /* stronger rules, input borders */

  /* ---------- COLOR / BRAND (indigo-slate — structure & trust) ---------- */
  --slate:         #233047;   /* primary brand — headers, footer, logo */
  --slate-deep:    #18222F;   /* dark sections, hover, footer floor */
  --slate-mid:     #33425C;   /* secondary brand surfaces, borders */
  --slate-soft:    #5A6A85;   /* muted brand text on light */
  --slate-tint:    #E5E8EE;   /* light wash — info blocks, badges */

  /* ---------- COLOR / ACTION (burnished copper — the only CTA color) ---------- */
  --copper:        #B87333;   /* CTA, primary action, marker underline */
  --copper-deep:   #99591F;   /* CTA hover / pressed */
  --copper-soft:   #C98A4F;   /* gradients, glints, hover tints */
  --copper-tint:   #F2E7D8;   /* highlight wash, key-takeaway boxes */
  --copper-line:   #D9B485;   /* the signature hairline "meridian" rule */

  /* ---------- COLOR / FUNCTIONAL ---------- */
  --ok:            #2F7D63;
  --ok-tint:       #DCEDE6;
  --warn:          #B0791B;
  --warn-tint:     #F7ECD4;
  --danger:        #B23A2B;
  --danger-tint:   #F6E1DD;
  --focus-ring:    #B87333;   /* 3px outline, 2px offset */

  /* ---------- TYPOGRAPHY ----------
     Display: Schibsted Grotesk — modern editorial grotesque, a touch
              of warmth in the curves. Distinct from Bricolage/Fraunces.
     UI/body: Hanken Grotesk — humanist, highly readable.
     Mono:    Geist Mono — figures, rates, schedules, labels. */
  --font-display: "Schibsted Grotesk", "Segoe UI", 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.7rem, 1.25rem + 5.9vw, 5rem);    /* 43 → 80 */
  --text-h1:      clamp(2.1rem, 1.35rem + 3.1vw, 3.5rem);  /* 34 → 56 */
  --text-h2:      clamp(1.6rem, 1.15rem + 1.95vw, 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.04;     /* hero / display — tight, confident */
  --leading-heading: 1.16;
  --leading-body:    1.65;
  --leading-legal:   1.55;

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

  --tracking-hero:   -0.025em; /* large display, optically tightened */
  --tracking-tight:  -0.015em;
  --tracking-label:  0.18em;   /* mono eyebrows / kickers, uppercased */
  --tracking-wide:   0.04em;

  /* ---------- 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 + 6.5vw, 7.5rem);  /* airy by default */
  --container:    1180px;
  --container-narrow: 784px;   /* article/reading measure ≈ 72ch */
  --gutter:       clamp(1.5rem, 5vw, 2.75rem);

  /* ---------- SHAPE ---------- */
  --radius-sm:    8px;     /* inputs, tags, chips */
  --radius-md:    12px;    /* cards, buttons */
  --radius-lg:    20px;    /* feature panels, calculator */
  --radius-xl:    28px;    /* hero media, large panels */
  --radius-pill:  999px;

  /* Signature shadows: soft, cool, diffuse — quiet elevation, never haze.
     Quiet-luxury means you feel the lift before you notice the shadow. */
  --shadow-xs:    0 1px 2px rgba(27,34,40,.05);
  --shadow-card:  0 1px 2px rgba(27,34,40,.04), 0 10px 28px rgba(27,34,40,.06);
  --shadow-pop:   0 4px 14px rgba(27,34,40,.07), 0 28px 60px rgba(27,34,40,.13);
  --shadow-press: inset 0 2px 5px rgba(27,34,40,.12);
  /* Premium CTA lift — warm copper glow, very low intensity */
  --shadow-cta:   0 2px 6px rgba(153,89,31,.22), 0 14px 30px rgba(153,89,31,.20);

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

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(.22, .8, .28, 1);
  --ease-soft:    cubic-bezier(.4, .14, .3, 1);
  --dur-fast:     150ms;
  --dur-base:     260ms;
  --dur-slow:     460ms;
  /* Rule: animate opacity/transform only. Respect prefers-reduced-motion. */

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

/* Inverted / dark sections (footer, pre-footer CTA, dark hero band).
   Stays cool indigo-slate — never goes warm or pure black. */
[data-theme="slate"] {
  --canvas:      var(--slate-deep);
  --canvas-sink: #121A25;
  --surface:     #213049;
  --surface-pure:#243353;
  --ink:         #EEF1F5;
  --ink-soft:    #B6C0D0;
  --ink-faint:   #7E8BA1;
  --line:        #2C3B53;
  --line-strong: #3A4C68;
  --slate-tint:  #2A3A55;
}