/* ==========================================================================
   THG Advisors — Design Tokens
   --------------------------------------------------------------------------
   The canonical token sheet. Three layers:
     1. Primitives   — raw values, never referenced by components directly
     2. Semantic     — named by role, what components consume
     3. Component    — only where a component must deviate from semantic

   Light theme is the canonical brand mode. Dark theme is an optional override.

   Palette and type sourced from the live thgadvisor.com (--tj-color-* custom
   properties and the Mona Sans / Inter font stack). Brand green is the deep
   forest #116032 (NOT bright #37CA37 — that was a default LeadConnector token
   that wasn't actually used in the brand design).
   ========================================================================== */


/* ==========================================================================
   1. PRIMITIVES
   ========================================================================== */

:root {

  /* ----- Color: heading / text (live site values) -----------------------
     #0c1e21 — heading color (deep teal-black, NOT pure black)
     #364e52 — body text (mid teal-gray, NOT cool gray)
     ---------------------------------------------------------------------- */
  --c-heading-50:  #E8ECEC;
  --c-heading-100: #C2C9CA;
  --c-heading-200: #899799;
  --c-heading-300: #5F7174;
  --c-heading-400: #364E52;   /* body text */
  --c-heading-500: #1F3437;
  --c-heading-600: #142528;
  --c-heading-700: #0C1E21;   /* primary heading color (anchor) */
  --c-heading-800: #07171A;
  --c-heading-900: #030F11;

  /* ----- Color: theme-dark (deep midnight indigo, the brand "dark") ----
     #0D0C2B from the live site. NOT cool ink. Use for dark surfaces
     (footer, dark feature blocks).
     ---------------------------------------------------------------------- */
  --c-midnight-50:  #E8E8EF;
  --c-midnight-100: #BDBCD1;
  --c-midnight-200: #8E8DAE;
  --c-midnight-300: #5E5C8C;
  --c-midnight-400: #3D3B6F;
  --c-midnight-500: #1F1E4C;
  --c-midnight-600: #15143C;
  --c-midnight-700: #0D0C2B;   /* brand dark anchor */
  --c-midnight-800: #08081E;
  --c-midnight-900: #040412;

  /* ----- Color: paper (light surfaces) ---------------------------------
     White is the canvas. #D8DBE5 (lavender-gray) is the sunken section
     band from the live site — keep it slightly cool, NOT warm.
     ---------------------------------------------------------------------- */
  --c-paper-white: #FFFFFF;
  --c-paper-50:    #FAFBFC;
  --c-paper-100:   #F3F4F8;
  --c-paper-200:   #E8EAF0;
  --c-paper-300:   #D8DBE5;   /* sunken section band (anchor — from live site) */
  --c-paper-400:   #B8BDC9;
  --c-paper-500:   #8B92A1;
  --c-paper-600:   #5F6675;
  --c-paper-700:   #404653;
  --c-paper-800:   #292D38;
  --c-paper-900:   #181B23;

  /* ----- Color: signal-green — primary brand color --------------------
     ANCHORED at #116032 (live site --tj-color-theme-primary). Deep forest
     green — confident, considered, not startup-y. This is THE brand color.
     ---------------------------------------------------------------------- */
  --c-signal-green-50:  #E6F3EB;
  --c-signal-green-100: #BFE0CD;
  --c-signal-green-200: #94CCAB;
  --c-signal-green-300: #68B889;
  --c-signal-green-400: #3FA56C;
  --c-signal-green-500: #1F8050;
  --c-signal-green-600: #166D44;
  --c-signal-green-700: #116032;   /* brand anchor (primary CTA fill) */
  --c-signal-green-800: #0C4524;
  --c-signal-green-900: #07301A;
  --c-signal-green-ink: #FFFFFF;   /* white text reads cleanly on #116032 */

  /* ----- Color: signal-blue (secondary accent — links / info) ----------
     Kept as a secondary signal. Not anchored on the bright #188BF6 —
     stepped to a darker, more considered tone that fits the editorial mood.
     ---------------------------------------------------------------------- */
  --c-signal-blue-50:  #E8F1FA;
  --c-signal-blue-100: #C6DCF1;
  --c-signal-blue-200: #92BCE3;
  --c-signal-blue-300: #5E9CD5;
  --c-signal-blue-400: #2F7DC4;
  --c-signal-blue-500: #1A65A8;   /* link text anchor */
  --c-signal-blue-600: #144F86;
  --c-signal-blue-700: #103E69;
  --c-signal-blue-800: #0B2E4F;
  --c-signal-blue-900: #061E35;

  /* ----- Color: error ---------------------------------------------------- */
  --c-error-50:  #FDECEC;
  --c-error-100: #FACFCF;
  --c-error-200: #F4A0A0;
  --c-error-300: #ED7070;
  --c-error-400: #E54F4F;
  --c-error-500: #D93838;
  --c-error-600: #B92626;
  --c-error-700: #921B1B;
  --c-error-800: #6B1313;
  --c-error-900: #420A0A;

  /* ----- Color: hero overlay -------------------------------------------- */
  --c-overlay-hero-top:    rgba(13, 12, 43, 0.30);
  --c-overlay-hero-bottom: rgba(13, 12, 43, 0.85);

  /* ----- Type primitives ------------------------------------------------
     Mona Sans is the brand's primary face (sourced from the live site).
     Inter is the secondary fallback. System mono for code.
     ---------------------------------------------------------------------- */
  --font-sans:     'Mona Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:  'Mona Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent:   'Inter', 'Mona Sans', system-ui, sans-serif;
  --font-mono:     ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ----- Spacing primitives — 4px base, geometric ----------------------- */
  --size-04:  4px;
  --size-08:  8px;
  --size-12:  12px;
  --size-16:  16px;
  --size-24:  24px;
  --size-32:  32px;
  --size-48:  48px;
  --size-64:  64px;
  --size-96:  96px;
  --size-128: 128px;

  /* ----- Radius primitives ----------------------------------------------
     Live site uses 10–13px on cards, 12px on sections themselves, 50–100px
     for icon pills. We standardize at 12px for cards/buttons and reserve
     pill (999px) for icon buttons and chips.
     ---------------------------------------------------------------------- */
  --radius-sm:    6px;
  --radius-md:    12px;     /* default — matches live site */
  --radius-lg:    24px;
  --radius-pill:  999px;

  /* ----- Motion primitives ---------------------------------------------- */
  --duration-fast:    120ms;
  --duration-base:    200ms;
  --duration-slow:    320ms;
  --duration-slower:  480ms;

  --ease-standard:  cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-emphatic:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:      cubic-bezier(0.4, 0.0, 1, 1);
}


/* ==========================================================================
   2. SEMANTIC TOKENS — LIGHT THEME (canonical)
   ========================================================================== */

:root,
[data-theme="light"] {

  /* ----- Surface --------------------------------------------------------
     White canvas. Lavender-gray sunken band matches the live site.
     ---------------------------------------------------------------------- */
  --color-surface:          var(--c-paper-white);
  --color-surface-sunken:   var(--c-paper-300);   /* #D8DBE5 lavender-gray */
  --color-surface-elevated: var(--c-paper-white);
  --color-surface-dark:     var(--c-midnight-700); /* dark feature blocks, footer */
  --color-surface-inverse:  var(--c-midnight-700);

  /* ----- Text -----------------------------------------------------------
     Headings get the deep teal-black (#0c1e21). Body gets the teal-gray.
     ---------------------------------------------------------------------- */
  --color-heading:        var(--c-heading-700);    /* #0C1E21 */
  --color-text:           var(--c-heading-400);    /* #364E52 (matches live body) */
  --color-text-muted:     var(--c-paper-600);
  --color-text-subtle:    var(--c-paper-500);
  --color-text-inverse:   var(--c-paper-white);
  --color-text-on-brand:  var(--c-paper-white);    /* white on #116032 — high contrast */
  --color-text-on-accent: var(--c-paper-white);

  /* ----- Border --------------------------------------------------------- */
  --color-border:         var(--c-paper-200);
  --color-border-strong:  var(--c-paper-300);
  --color-border-inverse: var(--c-midnight-500);

  /* ----- Brand / accent ------------------------------------------------- */
  --color-brand:          var(--c-signal-green-700);   /* #116032 — CTA fill */
  --color-brand-hover:    var(--c-signal-green-800);
  --color-brand-text:     var(--c-signal-green-700);   /* green text on white — passes AA */
  --color-brand-muted:    var(--c-signal-green-50);

  --color-accent:         var(--c-signal-blue-500);    /* link text */
  --color-accent-hover:   var(--c-signal-blue-600);
  --color-accent-fill:    var(--c-signal-blue-500);
  --color-accent-muted:   var(--c-signal-blue-50);

  --color-link:           var(--color-accent);
  --color-link-hover:     var(--color-accent-hover);

  /* ----- Status --------------------------------------------------------- */
  --color-success:        var(--c-signal-green-700);
  --color-info:           var(--c-signal-blue-500);
  --color-danger:         var(--c-error-600);

  /* ----- Focus ---------------------------------------------------------- */
  --color-focus-ring:     var(--c-signal-green-500);
  --focus-ring-width:     2px;
  --focus-ring-offset:    2px;

  /* ----- Shadows (calibrated for light surfaces) ------------------------ */
  --shadow-sm:   0 1px 2px  rgba(12, 30, 33, 0.04);
  --shadow-soft: 0 2px 12px rgba(12, 30, 33, 0.06);
  --shadow-md:   0 6px 24px rgba(12, 30, 33, 0.08);
  --shadow-lg:   0 16px 40px rgba(12, 30, 33, 0.12);
}


/* ==========================================================================
   2b. SEMANTIC TOKENS — DARK THEME (optional override)
   ========================================================================== */

[data-theme="dark"] {

  --color-surface:          var(--c-midnight-700);
  --color-surface-sunken:   var(--c-midnight-800);
  --color-surface-elevated: var(--c-midnight-600);
  --color-surface-dark:     var(--c-midnight-900);
  --color-surface-inverse:  var(--c-paper-white);

  --color-heading:          var(--c-paper-white);
  --color-text:             var(--c-paper-300);
  --color-text-muted:       var(--c-paper-400);
  --color-text-subtle:      var(--c-paper-500);
  --color-text-inverse:     var(--c-heading-700);
  --color-text-on-brand:    var(--c-paper-white);
  --color-text-on-accent:   var(--c-paper-white);

  --color-border:           var(--c-midnight-500);
  --color-border-strong:    var(--c-midnight-400);
  --color-border-inverse:   var(--c-paper-300);

  --color-brand:            var(--c-signal-green-500);
  --color-brand-hover:      var(--c-signal-green-400);
  --color-brand-text:       var(--c-signal-green-300);
  --color-brand-muted:      var(--c-signal-green-900);

  --color-accent:           var(--c-signal-blue-300);
  --color-accent-hover:     var(--c-signal-blue-200);
  --color-accent-fill:      var(--c-signal-blue-500);
  --color-accent-muted:     var(--c-signal-blue-900);

  --color-link:             var(--color-accent);
  --color-link-hover:       var(--color-accent-hover);

  --color-success:          var(--c-signal-green-400);
  --color-info:             var(--c-signal-blue-300);
  --color-danger:           var(--c-error-400);

  --color-focus-ring:       var(--c-signal-green-400);

  --shadow-sm:   0 1px 2px  rgba(0, 0, 0, 0.40);
  --shadow-soft: 0 2px 8px  rgba(0, 0, 0, 0.40);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 16px 40px rgba(0, 0, 0, 0.55);
}


/* ==========================================================================
   3. TYPE SCALE
   --------------------------------------------------------------------------
   Mona Sans variable; weights 400/500/600/700. Tighter tracking on display
   sizes — matches the live site's heading rhythm.
   ========================================================================== */

:root {

  --fs-display-xl: clamp(2.5rem, 3.5vw + 1.25rem, 4rem);    /* 40 → 64 */
  --lh-display-xl: 1.08;

  --fs-display-l:  clamp(2rem,   2.4vw + 1.25rem, 3rem);    /* 32 → 48 */
  --lh-display-l:  1.12;

  --fs-display-m:  clamp(1.625rem, 1.5vw + 1.125rem, 2.25rem); /* 26 → 36 */
  --lh-display-m:  1.18;

  --fs-heading-l:  1.5rem;     /* 24 */
  --lh-heading-l:  1.28;

  --fs-heading-m:  1.25rem;    /* 20 */
  --lh-heading-m:  1.38;

  --fs-heading-s:  1.125rem;   /* 18 */
  --lh-heading-s:  1.48;

  --fs-body-l:     1.125rem;   /* 18 — lede */
  --lh-body-l:     1.6;

  --fs-body:       1rem;       /* 16 */
  --lh-body:       1.7;

  --fs-body-s:     0.9375rem;  /* 15 */
  --lh-body-s:     1.6;

  --fs-caption:    0.75rem;    /* 12 — eyebrow */
  --lh-caption:    1.5;
  --tracking-caption: 0.14em;

  --fs-mono-s:     0.8125rem;
  --fs-mono:       0.875rem;

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
}


/* ==========================================================================
   4. SPACING / LAYOUT TOKENS
   ========================================================================== */

:root {

  --space-4:   var(--size-04);
  --space-8:   var(--size-08);
  --space-12:  var(--size-12);
  --space-16:  var(--size-16);
  --space-24:  var(--size-24);
  --space-32:  var(--size-32);
  --space-48:  var(--size-48);
  --space-64:  var(--size-64);
  --space-96:  var(--size-96);
  --space-128: var(--size-128);

  /* Section rhythm — bigger than v1.1 to match the live site's generous
     vertical breathing (top 150px / bottom 120px on desktop). */
  --space-section:    clamp(80px, 10vw, 120px);
  --space-section-lg: clamp(96px, 12vw, 150px);

  --container-content: 72ch;
  --container-narrow:  880px;
  --container-wide:    1240px;
  --container-full:    1440px;

  --gutter: clamp(16px, 4vw, 24px);
}


/* ==========================================================================
   5. COMPONENT TOKENS
   ========================================================================== */

:root {

  /* Buttons — rounded-rect 12px (NOT pill). Live site uses 10–13px. */
  --button-radius:        var(--radius-md);
  --button-radius-pill:   var(--radius-pill);   /* for icon-only buttons */
  --button-height-sm:     36px;
  --button-height-md:     48px;
  --button-height-lg:     56px;
  --button-padding-x-sm:  var(--space-16);
  --button-padding-x-md:  28px;
  --button-padding-x-lg:  32px;
  --button-font-weight:   var(--fw-semibold);

  /* Cards — white surface, no border by default, soft shadow, 12px radius. */
  --card-radius:          var(--radius-md);
  --card-padding:         var(--space-32);
  --card-shadow:          var(--shadow-soft);
  --card-shadow-hover:    var(--shadow-md);

  /* Inputs */
  --input-radius:         var(--radius-md);
  --input-height:         48px;
  --input-padding-x:      var(--space-16);

  /* Nav */
  --nav-height:           76px;
  --nav-bg:               rgba(255, 255, 255, 0.96);
  --nav-bg-scrolled:      var(--c-paper-white);
  --nav-border:           1px solid var(--color-border);
  --nav-blur:             saturate(140%) blur(8px);

  /* Section — the live site rounds section corners at 12px. Distinctive. */
  --section-radius:       var(--radius-md);

  /* Hairline */
  --hairline:             1px solid var(--color-border);
}


/* ==========================================================================
   6. ACCESSIBILITY — reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-base:   0ms;
    --duration-slow:   0ms;
    --duration-slower: 0ms;
  }
}