/* ==========================================================================
   Pathwise Design System — colors_and_type.css
   "Where Wealth Meets Wisdom"

   Brand palette + Satoshi sans are user-supplied (canonical).
   Editorial serifs (Cormorant Garamond, Source Serif 4) remain Google Fonts
   substitutes until a brand serif is provided.
   ========================================================================== */

/* Pathwise type system uses two families only: Satoshi (brand sans, supplied)
   and Times New Roman (system serif, universally available). No web-font
   import is required — Times is loaded from the OS, Satoshi from /fonts. */

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Variable.woff2') format('woff2-variations'),
       url('fonts/Satoshi-Variable.woff2') format('woff2'),
       url('fonts/Satoshi-Variable.woff') format('woff'),
       url('fonts/Satoshi-Variable.ttf') format('truetype-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-VariableItalic.woff2') format('woff2-variations'),
       url('fonts/Satoshi-VariableItalic.woff2') format('woff2'),
       url('fonts/Satoshi-VariableItalic.woff') format('woff'),
       url('fonts/Satoshi-VariableItalic.ttf') format('truetype-variations');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- COLOR · brand core (canonical) ---------------------------- */
  --color-violet-blue:    #0F46C4;   /* primary — wisdom, depth, action     */
  --color-uranian-blue:   #A3CEF1;   /* soft accent — calm, clarity         */
  --color-aquamarine:     #01E3A4;   /* vivid accent — agency, breakthrough */
  --color-charcoal:       #343837;   /* primary text, near-black surfaces   */
  --color-white:          #FFFFFF;   /* page                                */

  /* ---------- COLOR · derived neutrals (cool grayscale from charcoal) --- */
  --color-charcoal-90:    #4A4E4D;
  --color-charcoal-70:    #6B6F6E;
  --color-charcoal-50:    #9B9F9E;
  --color-charcoal-30:    #C9CBCA;
  --color-charcoal-15:    #E4E5E5;
  --color-charcoal-08:    #F2F3F2;

  /* ---------- COLOR · derived blue scale -------------------------------- */
  --color-violet-blue-90: #1E55D0;   /* hover lift                          */
  --color-violet-blue-70: #4F76D8;
  --color-violet-blue-30: #B8C7EC;
  --color-violet-blue-12: #E3EAF8;   /* tinted surface                      */
  --color-violet-blue-deep: #082F8A; /* press / depth                       */

  /* ---------- COLOR · derived aquamarine -------------------------------- */
  --color-aquamarine-deep:  #02B583;
  --color-aquamarine-12:    #DCFAEF;

  /* ---------- COLOR · derived uranian ----------------------------------- */
  --color-uranian-deep:     #6FAEDB;
  --color-uranian-30:       #DBEBF8;

  /* ---------- COLOR · semantic ------------------------------------------ */
  --fg-1:               var(--color-charcoal);
  --fg-2:               var(--color-charcoal-90);
  --fg-3:               var(--color-charcoal-70);
  --fg-4:               var(--color-charcoal-50);
  --fg-on-dark:         var(--color-white);
  --fg-on-dark-2:       var(--color-charcoal-30);
  --fg-link:            var(--color-violet-blue);
  --fg-link-hover:      var(--color-violet-blue-deep);

  --bg-page:            var(--color-white);
  --bg-surface:         var(--color-charcoal-08);
  --bg-surface-2:       var(--color-charcoal-15);
  --bg-tint:            var(--color-violet-blue-12);
  --bg-inverse:         var(--color-charcoal);
  --bg-premium:         var(--color-violet-blue);

  --border-hairline:    var(--color-charcoal-15);
  --border-strong:      var(--color-charcoal-50);
  --border-focus:       var(--color-violet-blue);

  --accent-primary:     var(--color-violet-blue);
  --accent-secondary:   var(--color-aquamarine);
  --accent-soft:        var(--color-uranian-blue);

  /* ---------- COLOR · money scripts ------------------------------------- */
  /* Mapped onto brand palette + a single off-palette warning hue for clay. */
  --script-avoidance:   var(--color-charcoal-70);       /* withdrawn, muted   */
  --script-worship:     var(--color-uranian-blue);      /* warm pursuit -> calm pursuit */
  --script-status:      var(--color-violet-blue);       /* visible, deep      */
  --script-vigilance:   var(--color-aquamarine-deep);   /* protective, alive  */

  /* ---------- COLOR · feedback ------------------------------------------ */
  --feedback-positive:  var(--color-aquamarine-deep);
  --feedback-warning:   #C99700;
  --feedback-critical:  #C13B2A;
  --feedback-info:      var(--color-violet-blue);

  /* ---------- TYPE · families ------------------------------------------- */
  --font-display:       'Times New Roman', Times, serif;
  --font-serif:         'Times New Roman', Times, serif;
  --font-sans:          'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:          'Satoshi', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE · scale ---------------------------------------------- */
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px;
  --text-lg: 21px; --text-xl: 26px; --text-2xl: 32px; --text-3xl: 42px;
  --text-4xl: 56px; --text-5xl: 72px; --text-6xl: 96px;

  --lh-tight: 1.08; --lh-snug: 1.22; --lh-normal: 1.45; --lh-relaxed: 1.6; --lh-loose: 1.75;
  --track-tight: -0.02em; --track-normal: 0; --track-wide: 0.04em; --track-caps: 0.14em;

  /* ---------- SPACING --------------------------------------------------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;

  /* ---------- RADII ----------------------------------------------------- */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-full: 999px;

  /* ---------- SHADOW · clean elevation ---------------------------------- */
  --shadow-paper:  0 1px 0 rgba(15,70,196,0.04), 0 1px 2px rgba(52,56,55,0.05);
  --shadow-lift:   0 1px 0 rgba(15,70,196,0.04), 0 8px 24px -10px rgba(15,70,196,0.18);
  --shadow-modal:  0 24px 64px -16px rgba(52,56,55,0.30);

  /* ---------- MOTION ---------------------------------------------------- */
  --ease-quiet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 360ms;

  /* ---------- LAYOUT ---------------------------------------------------- */
  --reading-width: 640px; --content-width: 960px; --shell-width: 1200px; --gutter: 24px;

  --z-nav: 50; --z-modal: 100; --z-toast: 200;

  /* ---------- COMPATIBILITY ALIASES -------------------------------------
     The first round of UI kits used a warm parchment + brass system. These
     aliases remap the old token names onto the canonical brand palette so
     existing JSX renders correctly. Prefer the canonical names for new work.
     -------------------------------------------------------------------- */
  --color-ink:         var(--color-charcoal);
  --color-midnight:    var(--color-charcoal-90);
  --color-indigo:      var(--color-violet-blue);
  --color-parchment:   var(--color-white);
  --color-cream:       var(--color-charcoal-08);
  --color-bone:        var(--color-charcoal-15);
  --color-mist:        var(--color-charcoal-15);
  --color-stone:       var(--color-charcoal-70);
  --color-sage:        var(--color-aquamarine-deep);
  --color-sage-deep:   var(--color-aquamarine-deep);
  --color-brass:       var(--color-violet-blue);
  --color-brass-deep:  var(--color-violet-blue-deep);
  --color-clay:        var(--color-uranian-deep);
}

.t-display { font-family: var(--font-display); font-weight: 500; font-size: var(--text-5xl); line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--fg-1); }
.t-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-4xl); line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--fg-1); }
.t-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-3xl); line-height: var(--lh-snug); letter-spacing: var(--track-tight); color: var(--fg-1); }
.t-h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: var(--lh-snug); color: var(--fg-1); }
.t-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-md); line-height: var(--lh-snug); letter-spacing: -0.005em; color: var(--fg-1); }
.t-lede { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: var(--text-xl); line-height: var(--lh-relaxed); color: var(--fg-2); }
.t-prose { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-md); line-height: var(--lh-loose); color: var(--fg-1); text-wrap: pretty; }
.t-pull-quote { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: var(--text-2xl); line-height: var(--lh-snug); color: var(--fg-2); }
.t-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--fg-1); }
.t-ui { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--fg-1); }
.t-meta { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--fg-3); }
.t-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-violet-blue); }
.t-label { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-sm); letter-spacing: 0.01em; color: var(--fg-2); }
.t-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.t-numeral { font-family: var(--font-display); font-weight: 400; font-size: var(--text-6xl); line-height: 1; letter-spacing: -0.02em; color: var(--color-violet-blue); font-feature-settings: "lnum"; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "calt";
}
a { color: var(--fg-link); text-decoration: none; text-underline-offset: 3px; transition: color var(--dur-base) var(--ease-quiet); }
a:hover { color: var(--fg-link-hover); text-decoration: underline; }
::selection { background: var(--color-aquamarine); color: var(--color-charcoal); }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; border-radius: 2px; }