/* ============================================================
   Liberty Partners Development — Design Tokens
   ============================================================ */

:root {
  /* ─── Brand · Coastal Navy on Cool White (DEFAULT) ───
     Crisp cool white carries the canvas; pale slate + whisper tints give
     rhythm without warmth, and deep coastal navy bands do the heavy contrast.
     Highlight discipline: MID-BLUE carries accents on LIGHT grounds;
     SKY carries accents, CTAs, hovers & focus on DARK grounds. */

  /* PRIMARY — structure */
  --ink:          #0f2336;   /* near-black coastal navy — body text, dark grounds */
  --ink-2:        #1a3149;
  --ink-soft:     #42566a;
  --paper:        #fbfcfd;   /* near-white, faint cool — default canvas */
  --paper-2:      #edf1f4;   /* cool white / pale slate — alt light surface */
  --paper-3:      #d6dee5;   /* slate — cards, edges */
  /* Extra cool grounds — slate/blue tints for section rhythm, never warm */
  --sand:         #e3eaf0;   /* pale slate-blue — feature ground */
  --linen:        #f2f5f7;   /* whisper slate — subtle half-step from white */
  --clay-wash:    #e7eef3;   /* pale cool wash for feature bands */

  /* SECONDARY — accent blues (tonal scale) */
  --coastal:      #143a5c;   /* deep accent, dark-section base */
  --coastal-deep: #0e2b45;
  --mid-blue:     #2f5a82;   /* links, secondary accents */
  --sky:          #7ba1c0;   /* HIGHLIGHT — hovers, focus rings, the arrow, dark-ground CTAs */

  /* UTILITY */
  --muted:        #6c7a88;   /* captions, meta — cool slate-gray */
  --rule:         #cdd6dd;   /* hairlines — cool slate */
  --rule-soft:    rgba(15,35,54,.10);
  --bone:         #eef2f5;   /* cool light */
  --clay:         #b06a44;   /* functional caution only — NOT a brand color */

  /* legacy aliases — keep existing markup resolving to the new blues */
  --forest:       var(--coastal);
  --forest-deep:  var(--coastal-deep);
  --olive:        var(--mid-blue);
  --sage:         var(--sky);
  --brass:        var(--sky);       /* retired → sky (its refs sit mostly on dark grounds) */
  --brass-deep:   var(--mid-blue);  /* retired → mid-blue (its refs sit mostly on light grounds) */

  /* alias roles */
  --bg:           var(--paper);
  --bg-2:         var(--paper-2);
  --fg:           var(--ink);
  --fg-soft:      var(--ink-soft);
  /* All-blue role map ─────────────────────────────────────
     --accent     : mid-blue — text highlight, links & hover on LIGHT grounds
     --surface-cta: deep coastal — primary button & one colored ground
     --mark       : mid-blue — small-dose accent for marks on LIGHT grounds
     --mark-fill  : mid-blue — fills/underlines/dots/quote glyphs
     --mark-on-dark: sky — accents, CTAs & hovers on DARK grounds              */
  --accent:       var(--mid-blue);
  --accent-2:     var(--sky);
  --surface-cta:  var(--coastal);
  --mark:         var(--mid-blue);
  --mark-fill:    var(--mid-blue);
  --mark-on-dark: var(--sky);
  --on-accent:    var(--paper);

  /* type — sans display (Archivo), editorial serif body (Newsreader) */
  --font-display: "Archivo", "Söhne", "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-script:  "Newsreader", serif;

  /* type scale (px) */
  --t-display:    clamp(64px, 9.5vw, 168px);
  --t-h1:         clamp(48px, 6vw, 96px);
  --t-h2:         clamp(36px, 4.4vw, 64px);
  --t-h3:         clamp(24px, 2.4vw, 36px);
  --t-h4:         20px;
  --t-body:       17px;
  --t-body-lg:    20px;
  --t-small:      14px;
  --t-eyebrow:    11px;

  --lh-display:   0.92;
  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-body:      1.55;

  --ls-display:   -0.025em;
  --ls-eyebrow:   0.22em;
  --ls-caps:      0.08em;

  /* spacing scale */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  --gutter:       clamp(20px, 4vw, 56px);
  --max-w:        1440px;
  --max-w-text:   720px;

  --radius-sm:    2px;
  --radius:       4px;
  --radius-lg:    8px;

  --shadow-1:     0 1px 2px rgba(15,35,54,.07), 0 8px 24px -12px rgba(15,35,54,.16);
  --shadow-2:     0 2px 6px rgba(15,35,54,.10), 0 24px 64px -24px rgba(15,35,54,.28);

  --ease:         cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── One unified system: All-Blue Coastal (see :root).
       Brass retired — only Light (root) and Dark (below). ─── */

/* ─── Dark mode (independent of brand direction) — cool coastal night ─── */
[data-theme="dark"] {
  --paper:    #0c1a28;
  --paper-2:  #122436;
  --paper-3:  #1c3147;
  /* keep the extra feature grounds dark too, with gentle variation */
  --sand:     #16293a;
  --linen:    #0f2031;
  --clay-wash:#19304a;
  --ink:      #e8eef3;
  --ink-2:    #cdd9e2;
  --ink-soft: #9fb0bf;
  --muted:    #6f8294;
  --rule:     #2a3e52;
  --rule-soft:#1d3145;
  --on-accent: #0c1a28;
  /* on dark grounds, lift marks & accents to sky for contrast */
  --mark:      var(--sky);
  --mark-fill: var(--sky);
  --accent:    var(--sky);
}

/* ─── Density tweak ─── */
[data-density="cozy"] {
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 64px;
  --s-10: 88px;
  --s-11: 128px;
}
[data-density="airy"] {
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 144px;
  --s-10: 192px;
  --s-11: 256px;
}