/* GENERATED by tools/build_nvy.py from the Nvy theme skeleton, 2026-10-17T11:41:40Z. Do not edit. */
:root {

  /* ═══════════════════════════════════════════════════════
     1. LAYOUT & GRID
     ─────────────────────────────────────────────────────
     Module grid system — full / breakout / content zones.
     Uses CSS subgrid. Set in HubSpot portal → Spacing.
     ═══════════════════════════════════════════════════════ */

  --mvs-gutter-inline: clamp(30px, 5vw, 60px);
  --mvs-gutter-block:  clamp(40px, 6vw, 80px);

  --mvs-gutter-top:    var(--mvs-gutter-block);
  --mvs-gutter-bottom: var(--mvs-gutter-block);

  --mvs-content-max-width:  1200px;
  --mvs-breakout-max-width: 1400px;

  --mvs-breakout-size:      minmax(0, calc((var(--mvs-breakout-max-width) - var(--mvs-content-max-width)) / 2));
  --mvs-content-size:       min(100% - (var(--mvs-gutter-inline) * 2), var(--mvs-content-max-width));
  --mvs-content-size--half: calc(var(--mvs-content-size) / 2);

  /* Desktop grid — full / gutter / breakout / content zones */
  --mvs-cols:
    [full-start] var(--mvs-gutter-inline)
    [gutter-start] auto
    [breakout-start] var(--mvs-breakout-size)
    [content-start content-col-1-start] var(--mvs-content-size--half)
    [content-col-1-end content-col-2-start] var(--mvs-content-size--half)
    [content-col-2-end content-end] var(--mvs-breakout-size)
    [breakout-end] auto
    [gutter-end] var(--mvs-gutter-inline)
    [full-end];

  --mvs-rows:
    [full-start] minmax(var(--mvs-gutter-top), auto)
    [gutter-start breakout-start content-start content-col-1-start content-col-2-start] auto
    [content-col-1-end content-col-2-end content-end breakout-end gutter-end]
    minmax(var(--mvs-gutter-bottom), auto)
    [full-end];

  /* Mobile grid — single content column */
  --mvs-cols--mobile:
    [full-start] var(--mvs-gutter-inline)
    [gutter-start breakout-start content-start content-col-1-start content-col-2-start] auto
    [content-col-1-end content-col-2-end content-end breakout-end gutter-end]
    var(--mvs-gutter-inline)
    [full-end];

  --mvs-rows--mobile:
    [full-start] minmax(var(--mvs-gutter-top), auto)
    [gutter-start breakout-start content-start content-col-1-start] auto
    [content-col-1-end content-col-2-start] auto
    [content-col-2-end content-end breakout-end gutter-end]
    minmax(var(--mvs-gutter-bottom), auto)
    [full-end];

  /* ═══════════════════════════════════════════════════════
     2. BRAND COLOURS
     ─────────────────────────────────────────────────────
     Palette, typography, and structural overrides per brand
     are defined in assets/css/vars/brands/_brand-{name}.css.
     The active brand file is included at the bottom of this
     :root {} block so its declarations win over the defaults.
     ═══════════════════════════════════════════════════════ */

  /* ═══════════════════════════════════════════════════════
     3. TYPOGRAPHY
     ─────────────────────────────────────────────────────
     Font families from HubSpot portal → Design → Fonts.
     Type scale is defined in _typography.css.
     ═══════════════════════════════════════════════════════ */

  --font-family-monospace: SFMono-Regular, monospace;

  /* Fluid base font size */
  --font-size-base: clamp(16px, 1.5vw, 18px);

  /* Named size scale */
  --font-size-xxsm: 0.625em;
  --font-size-xsm:  0.75em;
  --font-size-sm:   0.875em;
  --font-size-lg:   1.125em;

  /* Link colours */
  --link-color:         var(--text-color-primary);
  --link-color-hover:   var(--text-color-primary);
  --link-color-visited: var(--text-color-primary);

  /* Heading default colour */
  --heading-color: var(--hs-primary);

  /* ── Atom typography variable defaults ─────────────────
     These are the Level 3 fallbacks for each atom.
     They can be overridden per module via Level 2 vars.
     ────────────────────────────────────────────────────── */

  /* mvsTitle */
  --title-color: inherit;

  /* mvsPreTitle */
  --pre-title-color:       var(--hs-primary);
  --pre-title-size:        0.825em;
  --pre-title-weight:      600;
  --pre-title-line-height: 1.1;
  --pre-title-transform:   uppercase;
  --pre-title-tracking:    0.1em;

  /* mvsSubTitle */
  --sub-title-color:       var(--text-color-secondary);
  --sub-title-size:        1.125em;
  --sub-title-weight:      400;
  --sub-title-style:       italic;
  --sub-title-opacity:     0.5;
  --sub-title-line-height: 1.5;

  /* mvsRichText */
  --richtext-color:  inherit;
  --richtext-size:   inherit;
  --richtext-weight: 400;

  /* Module-level heading overrides (set per module context) */
  --module-title-color:     var(--heading-color);
  --module-pretitle-color:  var(--hs-primary);
  --module-subtitle-color:  var(--text-color-secondary);

  --module-title-color--dark:    var(--hs-white);
  --module-pretitle-color--dark: var(--hs-white);
  --module-subtitle-color--dark: var(--hs-white);

  /* ═══════════════════════════════════════════════════════
     4. RADIUS
     ─────────────────────────────────────────────────────
     Used by Radius Tokens in Figma.
     --global-image-radius is overridden per client brand.
     ═══════════════════════════════════════════════════════ */

  --global-radius:    clamp(1rem,   2vw, 2rem);    /* fluid default */
  --global-radius-xl: clamp(2rem,   4vw, 3rem);    /* buttons (pill default) */
  --global-radius-lg: clamp(1.5rem, 3vw, 2.5rem);  /* images, large cards */
  --global-radius-md: clamp(0.75rem, 2vw, 1.5rem); /* cards, logo, tags */
  --global-radius-sm: clamp(0.375rem, 1vw, 0.75rem); /* badges, small elements */

  /* Image radius — override per client */
  --global-image-radius: var(--global-radius-lg);

  /* Shadows */
  --box-shadow:    0px 0px 40px -20px rgba(70, 87, 120, 0.8);
  --box-shadow-lg: 0px 0px 60px -10px rgba(70, 87, 120, 1.0);

  /* Brand signature corner — the "cut" corner in the MVS diagonal pattern.
     Set to 0 for the signature look, override per brand for uniform corners. */
  --mvs-corner-accent: 0;

  /* Global transition speed */
  --global-trans: 300ms;

  /* ═══════════════════════════════════════════════════════
     5. SPACING SCALE
     ─────────────────────────────────────────────────────
     Three tiers mapping to atomic design levels.

     ATOM gaps     = fixed rem  — internal padding within an atom
     MOLECULE gaps = fixed/light fluid — spacing between atoms in a molecule
     ORGANISM gaps = always fluid (clamp) — module padding, section spacing

     RULE: Atoms never set their own external spacing.
     External spacing is always the parent's responsibility.
     ═══════════════════════════════════════════════════════ */

  /* Atom — 5 steps, fixed */
  --atom-tiny:     0.25rem;   /*  4px — icon/label tight gap */
  --atom-small:    0.5rem;    /*  8px — small internal gap */
  --atom-standard: 0.5em;     /* ~8px — standard internal gap */
  --atom-large:    1rem;      /* 16px — button padding-block */
  --atom-largest:  1.25rem;   /* 20px — generous atom padding */

  /* Molecule — 5 steps */
  --molecule-tiny:     1rem;              /* 16px — tight molecule gap */
  --molecule-small:    1.5rem;            /* 24px — button padding-inline */
  --molecule-standard: clamp(1.25rem, 2vw, 1.75rem);
  --molecule-large:    2.5rem;            /* 40px */
  --molecule-largest:  3.5rem;            /* 56px */

  /* Organism — 5 steps, always fluid — each ~1.6× the previous */
  --organism-tiny:     clamp(1rem,    2vw,  2rem);     /*  16–32px  */
  --organism-small:    clamp(2rem,    4vw,  3.75rem);  /*  32–60px  */
  --organism-standard: clamp(3.75rem, 7vw,  6.25rem);  /*  60–100px */
  --organism-large:    clamp(6rem,   10vw,  9.375rem); /*  96–150px */
  --organism-largest:  clamp(8.75rem, 14vw, 13.75rem); /* 140–220px */

  /* Window / module padding — from HubSpot portal → Spacing */
  --max-width:              1200px;
  --window-padding--inline: clamp(20px, 5vw, 60px);
  --module-padding--block:  clamp(40px, 6vw, 80px);
  --module-full-gutter:     clamp(30px, 5vw, 60px);

  /* ═══════════════════════════════════════════════════════
     6. BUTTONS
     ─────────────────────────────────────────────────────
     Structural/sizing vars set here.
     Colour vars from HubSpot portal → Buttons.
     Per-atom override chain defined in mvsButton.css.
     ═══════════════════════════════════════════════════════ */

  --button-border-radius: var(--global-radius-xl);
  --button-padding:       0.75em 1.25em;
  --button-font-size:     1rem;
  --button-font-weight:   400;
  --button-line-height:   1.1;
  --button-transition:    background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  --button-border-width:         2px;
  --button-hollow-border-width:  2px;
  --button-group-gap:     var(--atom-standard) var(--molecule-small);

  /* Primary — follows brand primary */
  --button-primary-bg:          var(--hs-primary);
  --button-primary-text:        var(--hs-primary--text-over);
  --button-primary-bg-hover:    var(--hs-primary--dark);
  --button-primary-text-hover:  var(--hs-primary--text-over);
  --button-primary-border:      var(--hs-primary);

  /* Secondary — follows brand secondary */
  --button-secondary-bg:         var(--hs-secondary);
  --button-secondary-text:       var(--hs-secondary--text-over);
  --button-secondary-bg-hover:   var(--hs-secondary--dark);
  --button-secondary-text-hover: var(--hs-secondary--text-over);
  --button-secondary-border:     var(--hs-secondary);

  /* Tertiary — follows brand tertiary */
  --button-tertiary-bg:         var(--hs-tertiary);
  --button-tertiary-text:       var(--hs-tertiary--text-over);
  --button-tertiary-bg-hover:   var(--hs-tertiary--dark);
  --button-tertiary-text-hover: var(--hs-tertiary--text-over);
  --button-tertiary-border:     var(--hs-tertiary);

  /* Light */
  --button-light-bg:         var(--hs-white);
  --button-light-text:       var(--hs-black);
  --button-light-border:     var(--hs-white);
  --button-light-bg-hover:   var(--hs-tertiary);
  --button-light-text-hover: var(--hs-tertiary--text-over);

  /* Dark */
  --button-dark-bg:         var(--hs-black);
  --button-dark-text:       var(--hs-white);
  --button-dark-border:     var(--hs-black);
  --button-dark-bg-hover:   var(--hs-primary--dark);
  --button-dark-text-hover: var(--hs-white);

  /* Disabled */
  --button-disabled-opacity:    0.6;
  --button-disabled-background: var(--hs-primary--light);
  --button-disabled-text:       var(--hs-white);

  /* ═══════════════════════════════════════════════════════
     7. FORMS
     ─────────────────────────────────────────────────────
     From HubSpot portal → Content Types → Forms.
     Form atoms are design-only in Figma — HubSpot renders
     form HTML natively via .hs-form selectors.
     ═══════════════════════════════════════════════════════ */

  --form-text-color:    var(--text-color-primary);
  --form-heading-color: var(--text-color-primary);

  --form-label-color:          var(--text-color-primary);
  --form-label-color--disabled: var(--text-color-muted);

  --form-input-background-color:            var(--hs-white);
  --form-input-border-color:                var(--hs-tertiary--dark);
  --form-input-text-color:                  var(--text-color-primary);
  --form-input-background-color--focus:     var(--hs-white);
  --form-input-border-color--focus:         var(--hs-primary);
  --form-input-text-color--focus:           var(--text-color-primary);
  --form-input-background-color--disabled:  var(--hs-tertiary);
  --form-input-border-color--disabled:      var(--hs-tertiary--dark);
  --form-input-text-color--disabled:        var(--text-color-muted);

  --form-error-color:   var(--hs-accent-5);
  --form-success-color: var(--hs-secondary);

  --form-button-bg:             var(--hs-primary);
  --form-button-text:           var(--hs-primary--text-over);
  --form-button-bg-hover:       var(--hs-primary--dark);
  --form-button-text-hover:     var(--hs-primary--text-over);
  --form-button-bg-disabled:    var(--hs-primary--light);
  --form-button-text-disabled:  var(--hs-white);
  --form-button-border:         var(--form-button-bg);
  --form-button-border-hover:   var(--form-button-bg-hover);
  --form-button-border-disabled: var(--form-button-bg-disabled);

  --form-padding:               var(--atom-small) var(--atom-standard);
  --form-border-width:          1px;
  --form-border-radius:         0;
  --form-button-border-radius:  var(--global-radius-md);
  --form-font-size:             1rem;
  --form-line-height:           1.5;
  --form-margin-bottom:         1rem;
  --form-transition:            all 0.2s ease-in-out;

  /* ═══════════════════════════════════════════════════════
     8. MODALS
     ─────────────────────────────────────────────────────
     From HubSpot portal → Content Types → Modals.
     ═══════════════════════════════════════════════════════ */

  --modal-body-bg:      var(--hs-white);
  --modal-body-color:   var(--text-color-primary);
  --modal-backdrop-bg:    var(--hs-dark--60pc);
  --modal-backdrop-blur:  15px;

  --modal-close-bg:           var(--hs-tertiary);
  --modal-close-label:        var(--text-color-primary);
  --modal-close-bg-hover:     var(--hs-primary);
  --modal-close-label-hover:  var(--hs-white);

  /* ═══════════════════════════════════════════════════════
     BRAND OVERRIDE — loaded last so it wins
     ─────────────────────────────────────────────────────
     To add a new brand:
       1. Create assets/css/vars/brands/_brand-{name}.css
       2. Add an  branch below
       3. Set active_brand = '{name}' at the top of this file
     ═══════════════════════════════════════════════════════ */

  /* ── Colours ──────────────────────────────────────────────── */

  --hs-primary:            #0E0F12;
  --hs-primary--text-over: #FFFFFF;
  --hs-primary--light:     #3A3D45;
  --hs-primary--dark:      #000000;
  --hs-primary--5pc: rgba(14, 15, 18, 0.05);
  --hs-primary--10pc: rgba(14, 15, 18, 0.1);
  --hs-primary--15pc: rgba(14, 15, 18, 0.15);
  --hs-primary--20pc: rgba(14, 15, 18, 0.2);
  --hs-primary--25pc: rgba(14, 15, 18, 0.25);
  --hs-primary--30pc: rgba(14, 15, 18, 0.3);
  --hs-primary--35pc: rgba(14, 15, 18, 0.35);
  --hs-primary--40pc: rgba(14, 15, 18, 0.4);
  --hs-primary--45pc: rgba(14, 15, 18, 0.45);
  --hs-primary--50pc: rgba(14, 15, 18, 0.5);
  --hs-primary--55pc: rgba(14, 15, 18, 0.55);
  --hs-primary--60pc: rgba(14, 15, 18, 0.6);
  --hs-primary--65pc: rgba(14, 15, 18, 0.65);
  --hs-primary--70pc: rgba(14, 15, 18, 0.7);
  --hs-primary--75pc: rgba(14, 15, 18, 0.75);
  --hs-primary--80pc: rgba(14, 15, 18, 0.8);
  --hs-primary--85pc: rgba(14, 15, 18, 0.85);
  --hs-primary--90pc: rgba(14, 15, 18, 0.9);
  --hs-primary--95pc: rgba(14, 15, 18, 0.95);

  --hs-secondary:            #2D5BFF;
  --hs-secondary--text-over: #FFFFFF;
  --hs-secondary--light:     #6A8BFF;
  --hs-secondary--dark:      #1A3FD1;
  --hs-secondary--5pc: rgba(45, 91, 255, 0.05);
  --hs-secondary--10pc: rgba(45, 91, 255, 0.1);
  --hs-secondary--15pc: rgba(45, 91, 255, 0.15);
  --hs-secondary--20pc: rgba(45, 91, 255, 0.2);
  --hs-secondary--25pc: rgba(45, 91, 255, 0.25);
  --hs-secondary--30pc: rgba(45, 91, 255, 0.3);
  --hs-secondary--35pc: rgba(45, 91, 255, 0.35);
  --hs-secondary--40pc: rgba(45, 91, 255, 0.4);
  --hs-secondary--45pc: rgba(45, 91, 255, 0.45);
  --hs-secondary--50pc: rgba(45, 91, 255, 0.5);
  --hs-secondary--55pc: rgba(45, 91, 255, 0.55);
  --hs-secondary--60pc: rgba(45, 91, 255, 0.6);
  --hs-secondary--65pc: rgba(45, 91, 255, 0.65);
  --hs-secondary--70pc: rgba(45, 91, 255, 0.7);
  --hs-secondary--75pc: rgba(45, 91, 255, 0.75);
  --hs-secondary--80pc: rgba(45, 91, 255, 0.8);
  --hs-secondary--85pc: rgba(45, 91, 255, 0.85);
  --hs-secondary--90pc: rgba(45, 91, 255, 0.9);
  --hs-secondary--95pc: rgba(45, 91, 255, 0.95);

  --hs-tertiary:            #E9E9E4;
  --hs-tertiary--text-over: #0E0F12;
  --hs-tertiary--light:     #F4F4F1;
  --hs-tertiary--dark:      #CFCFC8;
  --hs-tertiary--5pc: rgba(233, 233, 228, 0.05);
  --hs-tertiary--10pc: rgba(233, 233, 228, 0.1);
  --hs-tertiary--15pc: rgba(233, 233, 228, 0.15);
  --hs-tertiary--20pc: rgba(233, 233, 228, 0.2);
  --hs-tertiary--25pc: rgba(233, 233, 228, 0.25);
  --hs-tertiary--30pc: rgba(233, 233, 228, 0.3);
  --hs-tertiary--35pc: rgba(233, 233, 228, 0.35);
  --hs-tertiary--40pc: rgba(233, 233, 228, 0.4);
  --hs-tertiary--45pc: rgba(233, 233, 228, 0.45);
  --hs-tertiary--50pc: rgba(233, 233, 228, 0.5);
  --hs-tertiary--55pc: rgba(233, 233, 228, 0.55);
  --hs-tertiary--60pc: rgba(233, 233, 228, 0.6);
  --hs-tertiary--65pc: rgba(233, 233, 228, 0.65);
  --hs-tertiary--70pc: rgba(233, 233, 228, 0.7);
  --hs-tertiary--75pc: rgba(233, 233, 228, 0.75);
  --hs-tertiary--80pc: rgba(233, 233, 228, 0.8);
  --hs-tertiary--85pc: rgba(233, 233, 228, 0.85);
  --hs-tertiary--90pc: rgba(233, 233, 228, 0.9);
  --hs-tertiary--95pc: rgba(233, 233, 228, 0.95);

  --hs-accent-1: #EEF2FF;
  --hs-accent-2: #1A3FD1;
  --hs-accent-3: #FFF4E5;
  --hs-accent-4: #5C5F66;
  --hs-accent-5: #C8102E;
  --hs-accent-1--5pc: rgba(238, 242, 255, 0.05);
  --hs-accent-1--10pc: rgba(238, 242, 255, 0.1);
  --hs-accent-1--15pc: rgba(238, 242, 255, 0.15);
  --hs-accent-1--20pc: rgba(238, 242, 255, 0.2);
  --hs-accent-1--25pc: rgba(238, 242, 255, 0.25);
  --hs-accent-1--30pc: rgba(238, 242, 255, 0.3);
  --hs-accent-1--35pc: rgba(238, 242, 255, 0.35);
  --hs-accent-1--40pc: rgba(238, 242, 255, 0.4);
  --hs-accent-1--45pc: rgba(238, 242, 255, 0.45);
  --hs-accent-1--50pc: rgba(238, 242, 255, 0.5);
  --hs-accent-1--55pc: rgba(238, 242, 255, 0.55);
  --hs-accent-1--60pc: rgba(238, 242, 255, 0.6);
  --hs-accent-1--65pc: rgba(238, 242, 255, 0.65);
  --hs-accent-1--70pc: rgba(238, 242, 255, 0.7);
  --hs-accent-1--75pc: rgba(238, 242, 255, 0.75);
  --hs-accent-1--80pc: rgba(238, 242, 255, 0.8);
  --hs-accent-1--85pc: rgba(238, 242, 255, 0.85);
  --hs-accent-1--90pc: rgba(238, 242, 255, 0.9);
  --hs-accent-1--95pc: rgba(238, 242, 255, 0.95);
  --hs-accent-2--5pc: rgba(26, 63, 209, 0.05);
  --hs-accent-2--10pc: rgba(26, 63, 209, 0.1);
  --hs-accent-2--15pc: rgba(26, 63, 209, 0.15);
  --hs-accent-2--20pc: rgba(26, 63, 209, 0.2);
  --hs-accent-2--25pc: rgba(26, 63, 209, 0.25);
  --hs-accent-2--30pc: rgba(26, 63, 209, 0.3);
  --hs-accent-2--35pc: rgba(26, 63, 209, 0.35);
  --hs-accent-2--40pc: rgba(26, 63, 209, 0.4);
  --hs-accent-2--45pc: rgba(26, 63, 209, 0.45);
  --hs-accent-2--50pc: rgba(26, 63, 209, 0.5);
  --hs-accent-2--55pc: rgba(26, 63, 209, 0.55);
  --hs-accent-2--60pc: rgba(26, 63, 209, 0.6);
  --hs-accent-2--65pc: rgba(26, 63, 209, 0.65);
  --hs-accent-2--70pc: rgba(26, 63, 209, 0.7);
  --hs-accent-2--75pc: rgba(26, 63, 209, 0.75);
  --hs-accent-2--80pc: rgba(26, 63, 209, 0.8);
  --hs-accent-2--85pc: rgba(26, 63, 209, 0.85);
  --hs-accent-2--90pc: rgba(26, 63, 209, 0.9);
  --hs-accent-2--95pc: rgba(26, 63, 209, 0.95);
  --hs-accent-3--5pc: rgba(255, 244, 229, 0.05);
  --hs-accent-3--10pc: rgba(255, 244, 229, 0.1);
  --hs-accent-3--15pc: rgba(255, 244, 229, 0.15);
  --hs-accent-3--20pc: rgba(255, 244, 229, 0.2);
  --hs-accent-3--25pc: rgba(255, 244, 229, 0.25);
  --hs-accent-3--30pc: rgba(255, 244, 229, 0.3);
  --hs-accent-3--35pc: rgba(255, 244, 229, 0.35);
  --hs-accent-3--40pc: rgba(255, 244, 229, 0.4);
  --hs-accent-3--45pc: rgba(255, 244, 229, 0.45);
  --hs-accent-3--50pc: rgba(255, 244, 229, 0.5);
  --hs-accent-3--55pc: rgba(255, 244, 229, 0.55);
  --hs-accent-3--60pc: rgba(255, 244, 229, 0.6);
  --hs-accent-3--65pc: rgba(255, 244, 229, 0.65);
  --hs-accent-3--70pc: rgba(255, 244, 229, 0.7);
  --hs-accent-3--75pc: rgba(255, 244, 229, 0.75);
  --hs-accent-3--80pc: rgba(255, 244, 229, 0.8);
  --hs-accent-3--85pc: rgba(255, 244, 229, 0.85);
  --hs-accent-3--90pc: rgba(255, 244, 229, 0.9);
  --hs-accent-3--95pc: rgba(255, 244, 229, 0.95);
  --hs-accent-4--5pc: rgba(92, 95, 102, 0.05);
  --hs-accent-4--10pc: rgba(92, 95, 102, 0.1);
  --hs-accent-4--15pc: rgba(92, 95, 102, 0.15);
  --hs-accent-4--20pc: rgba(92, 95, 102, 0.2);
  --hs-accent-4--25pc: rgba(92, 95, 102, 0.25);
  --hs-accent-4--30pc: rgba(92, 95, 102, 0.3);
  --hs-accent-4--35pc: rgba(92, 95, 102, 0.35);
  --hs-accent-4--40pc: rgba(92, 95, 102, 0.4);
  --hs-accent-4--45pc: rgba(92, 95, 102, 0.45);
  --hs-accent-4--50pc: rgba(92, 95, 102, 0.5);
  --hs-accent-4--55pc: rgba(92, 95, 102, 0.55);
  --hs-accent-4--60pc: rgba(92, 95, 102, 0.6);
  --hs-accent-4--65pc: rgba(92, 95, 102, 0.65);
  --hs-accent-4--70pc: rgba(92, 95, 102, 0.7);
  --hs-accent-4--75pc: rgba(92, 95, 102, 0.75);
  --hs-accent-4--80pc: rgba(92, 95, 102, 0.8);
  --hs-accent-4--85pc: rgba(92, 95, 102, 0.85);
  --hs-accent-4--90pc: rgba(92, 95, 102, 0.9);
  --hs-accent-4--95pc: rgba(92, 95, 102, 0.95);

  --hs-dark:  #0E0F12;
  --hs-light: var(--hs-white);
  --hs-dark--5pc: rgba(14, 15, 18, 0.05);
  --hs-dark--10pc: rgba(14, 15, 18, 0.1);
  --hs-dark--15pc: rgba(14, 15, 18, 0.15);
  --hs-dark--20pc: rgba(14, 15, 18, 0.2);
  --hs-dark--25pc: rgba(14, 15, 18, 0.25);
  --hs-dark--30pc: rgba(14, 15, 18, 0.3);
  --hs-dark--35pc: rgba(14, 15, 18, 0.35);
  --hs-dark--40pc: rgba(14, 15, 18, 0.4);
  --hs-dark--45pc: rgba(14, 15, 18, 0.45);
  --hs-dark--50pc: rgba(14, 15, 18, 0.5);
  --hs-dark--55pc: rgba(14, 15, 18, 0.55);
  --hs-dark--60pc: rgba(14, 15, 18, 0.6);
  --hs-dark--65pc: rgba(14, 15, 18, 0.65);
  --hs-dark--70pc: rgba(14, 15, 18, 0.7);
  --hs-dark--75pc: rgba(14, 15, 18, 0.75);
  --hs-dark--80pc: rgba(14, 15, 18, 0.8);
  --hs-dark--85pc: rgba(14, 15, 18, 0.85);
  --hs-dark--90pc: rgba(14, 15, 18, 0.9);
  --hs-dark--95pc: rgba(14, 15, 18, 0.95);

  --hs-black: #000000;
  --hs-white: #FFFFFF;
  --hs-white--5pc: rgba(255, 255, 255, 0.05);
  --hs-white--10pc: rgba(255, 255, 255, 0.1);
  --hs-white--15pc: rgba(255, 255, 255, 0.15);
  --hs-white--20pc: rgba(255, 255, 255, 0.2);
  --hs-white--25pc: rgba(255, 255, 255, 0.25);
  --hs-white--30pc: rgba(255, 255, 255, 0.3);
  --hs-white--35pc: rgba(255, 255, 255, 0.35);
  --hs-white--40pc: rgba(255, 255, 255, 0.4);
  --hs-white--45pc: rgba(255, 255, 255, 0.45);
  --hs-white--50pc: rgba(255, 255, 255, 0.5);
  --hs-white--55pc: rgba(255, 255, 255, 0.55);
  --hs-white--60pc: rgba(255, 255, 255, 0.6);
  --hs-white--65pc: rgba(255, 255, 255, 0.65);
  --hs-white--70pc: rgba(255, 255, 255, 0.7);
  --hs-white--75pc: rgba(255, 255, 255, 0.75);
  --hs-white--80pc: rgba(255, 255, 255, 0.8);
  --hs-white--85pc: rgba(255, 255, 255, 0.85);
  --hs-white--90pc: rgba(255, 255, 255, 0.9);
  --hs-white--95pc: rgba(255, 255, 255, 0.95);
  --hs-black--5pc: rgba(0, 0, 0, 0.05);
  --hs-black--10pc: rgba(0, 0, 0, 0.1);
  --hs-black--15pc: rgba(0, 0, 0, 0.15);
  --hs-black--20pc: rgba(0, 0, 0, 0.2);
  --hs-black--25pc: rgba(0, 0, 0, 0.25);
  --hs-black--30pc: rgba(0, 0, 0, 0.3);
  --hs-black--35pc: rgba(0, 0, 0, 0.35);
  --hs-black--40pc: rgba(0, 0, 0, 0.4);
  --hs-black--45pc: rgba(0, 0, 0, 0.45);
  --hs-black--50pc: rgba(0, 0, 0, 0.5);
  --hs-black--55pc: rgba(0, 0, 0, 0.55);
  --hs-black--60pc: rgba(0, 0, 0, 0.6);
  --hs-black--65pc: rgba(0, 0, 0, 0.65);
  --hs-black--70pc: rgba(0, 0, 0, 0.7);
  --hs-black--75pc: rgba(0, 0, 0, 0.75);
  --hs-black--80pc: rgba(0, 0, 0, 0.8);
  --hs-black--85pc: rgba(0, 0, 0, 0.85);
  --hs-black--90pc: rgba(0, 0, 0, 0.9);
  --hs-black--95pc: rgba(0, 0, 0, 0.95);

  /* ── Text ─────────────────────────────────────────────────── */

  --text-color-primary:   #0E0F12;
  --text-color-secondary: #5C5F66;
  --text-color-muted:     #8E9097;
  --heading-color:        var(--text-color-primary);

  /* ── Typography ───────────────────────────────────────────── */

  --font-family-base:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Structural overrides ─────────────────────────────────── */

  --button-border-radius: 0.5rem;
  --button-font-weight:   600;
  --global-radius-md:     0.75rem;
  --global-radius-lg:     1rem;
  --box-shadow:           none;
  --box-shadow-lg:        none;

}