/* TRG Private Wealth design tokens.
   Jost (SIL Open Font License, see /assets/fonts/OFL.txt) is self-hosted, so no visitor data goes to
   Google. One variable file per subset covers weights 300 to 700. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/jost-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/jost-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ============================================================
   TRG Private Wealth — Colour tokens
   Source: TRG Brand Guideline Manual (SWITCHmarketing, 2016)
   The identity is predominantly black & white; the secondary
   palette (seafoam, sky, greys) is used sparingly as accent.
   ============================================================ */
:root {
  /* --- Brand base palette --- */
  --trg-navy:        #180b3c; /* PANTONE 275 C — logo, headings */
  --trg-sky:         #5fbff9; /* PANTONE 292 C — tagline, data accent */
  --trg-seafoam:     #6bc0a1; /* PANTONE 338 C — primary action / links */
  --trg-grey:        #7a7b7b; /* PANTONE Cool Gray 9 C — body copy */
  --trg-grey-light:  #f3f3f4; /* 5% black — colour blocks / backgrounds */
  --trg-black:       #111017;
  --trg-white:       #ffffff;

  /* --- Navy ramp (derived for surfaces, hovers, depth) --- */
  --navy-900: #0d0622;
  --navy-800: #140934;
  --navy-700: #180b3c; /* = --trg-navy */
  --navy-600: #2a1d54;
  --navy-500: #3d2f6e;
  --navy-400: #6a5f92;

  /* --- Seafoam ramp (action states) --- */
  --seafoam-700: #4a9d7f;
  --seafoam-600: #57b08f;
  --seafoam-500: #6bc0a1; /* = --trg-seafoam */
  --seafoam-300: #a4d8c5;
  --seafoam-100: #e6f4ee;

  /* --- Sky ramp (informational / data) --- */
  --sky-600: #2f9fe6;
  --sky-500: #5fbff9; /* = --trg-sky */
  --sky-300: #a6dcfc;
  --sky-100: #e7f5fe;

  /* --- Neutral grey ramp --- */
  --grey-900: #1f1f24;
  --grey-700: #4c4d4f;
  --grey-600: #6a6b6c;
  --grey-500: #7a7b7b; /* = --trg-grey */
  --grey-400: #a3a4a4;
  --grey-300: #cbcccc;
  --grey-200: #e4e5e6;
  --grey-100: #f3f3f4; /* = --trg-grey-light */
  --grey-50:  #fafafb;

  /* --- Semantic status (anchored to brand hues) --- */
  --status-positive: #4a9d7f; /* growth — seafoam dark */
  --status-negative: #c0492f; /* loss — warm clay, used sparingly */
  --status-info:     #2f9fe6; /* sky */
  --status-warning:  #d99a2b;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  /* Text */
  --text-heading:    var(--trg-navy);
  --text-body:       var(--grey-600);
  --text-muted:      var(--grey-400);
  --text-on-navy:    var(--trg-white);
  --text-on-accent:  var(--trg-white);
  --text-link:       var(--seafoam-700); /* seafoam is for LINKS & ACTIONS only */

  /* Eyebrows / kickers — NEVER seafoam (that is reserved for buttons &
     links). Navy on light backgrounds, sky on navy/dark. */
  --text-eyebrow:    var(--trg-navy);
  --text-eyebrow-on-navy: var(--trg-sky);
  /* Data / figures / tagline accent — sky, not seafoam */
  --accent-data:     var(--trg-sky);

  /* Surfaces */
  --surface-page:    var(--trg-white);
  --surface-card:    var(--trg-white);
  --surface-subtle:  var(--grey-100);
  --surface-inverse: var(--trg-navy);
  --surface-accent:  var(--seafoam-100);

  /* Lines & borders */
  --border-subtle:   var(--grey-200);
  --border-default:  var(--grey-300);
  --border-strong:   var(--grey-500);
  --border-on-navy:  rgba(255, 255, 255, 0.18);

  /* Actions */
  --action-primary:        var(--trg-seafoam);
  --action-primary-hover:  var(--seafoam-600);
  --action-primary-active: var(--seafoam-700);
  --action-secondary:      var(--trg-navy);
  --action-secondary-hover:var(--navy-600);

  /* Focus ring */
  --focus-ring: var(--sky-500);
}
/* ============================================================
   TRG Private Wealth — Typography tokens
   Brand: geometric rounded sans (Campton → Jost), loose
   letter-spacing, generous caps tracking on labels & taglines.
   ============================================================ */
:root {
  /* Families */
  --font-brand:     'Jost', 'Century Gothic', 'Avant Garde', system-ui, sans-serif;
  --font-display:   var(--font-brand);
  --font-body:      var(--font-brand);
  --font-condensed: 'Barlow Condensed', 'Jost', sans-serif; /* AmsiProCond substitute */
  --font-mono:      'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights — the brand leans light/regular for elegance */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale (1.250 major-third), rem-based on 16px root */
  --text-2xs:  0.6875rem; /* 11px — micro labels */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px — body */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */
  --text-4xl:  4rem;      /* 64px */
  --text-5xl:  5.25rem;   /* 84px — hero */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter-spacing — the TRG signature is wide tracking on
     uppercase labels (manual specifies tracking 50–100) */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-label:  0.14em;  /* eyebrows / micro-labels */
  --tracking-tagline:0.32em;  /* "PRIVATE WEALTH" lockup feel */

  /* ---- Semantic roles ---- */
  --display-font:    var(--font-display);
  --display-weight:  var(--weight-light);
  --display-tracking:var(--tracking-tight);

  --heading-font:    var(--font-display);
  --heading-weight:  var(--weight-medium);

  --eyebrow-font:    var(--font-brand);
  --eyebrow-weight:  var(--weight-semibold);
  --eyebrow-tracking:var(--tracking-label);

  --body-font:       var(--font-body);
  --body-weight:     var(--weight-regular);
  --body-leading:    var(--leading-relaxed);
}
/* ============================================================
   TRG Private Wealth — Spacing, radius, shadow, layout tokens
   ============================================================ */
:root {
  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7rem;     /* 112 */

  /* Radii — the brand is restrained & geometric: small radii,
     pill only for buttons / chips. Logo itself is sharp. */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 1px;
  --border-thick:    2px;

  /* Shadows — soft, cool, low-contrast (coastal light) */
  --shadow-xs: 0 1px 2px rgba(24, 11, 60, 0.06);
  --shadow-sm: 0 2px 6px rgba(24, 11, 60, 0.07);
  --shadow-md: 0 6px 18px rgba(24, 11, 60, 0.09);
  --shadow-lg: 0 16px 40px rgba(24, 11, 60, 0.12);
  --shadow-navy: 0 18px 44px rgba(24, 11, 60, 0.28);
  --ring-focus: 0 0 0 3px rgba(95, 191, 249, 0.45);

  /* Layout */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1140px;
  --container-xl: 1320px;
  --gutter:       var(--space-5);

  /* Motion — calm, professional easing; no bounce */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 220ms; /* @kind other */
  --duration-slow: 360ms; /* @kind other */
}
/* ============================================================
   TRG Private Wealth — Base element styling
   Applied lightly; tokens do the heavy lifting.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: var(--text-base);
  line-height: var(--body-leading);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--heading-font);
  color: var(--text-heading);
  font-weight: var(--heading-weight);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); font-weight: var(--weight-light); }
h2 { font-size: var(--text-2xl); font-weight: var(--weight-light); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--action-primary-active); }

/* The TRG eyebrow / micro-label signature — navy by default (seafoam is
   reserved for action buttons & links, never labels). Use on light bg;
   on navy backgrounds set color to var(--text-eyebrow-on-navy). */
.trg-eyebrow {
  font-family: var(--eyebrow-font);
  font-weight: var(--eyebrow-weight);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

::selection { background: var(--sky-300); color: var(--trg-navy); }

:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-xs); }