@layer sn-defaults, sn-settings;

/* ==========================================================================
   Theme Styles - Design System
   ==========================================================================
   One design system. Every value below is a :root custom property that
   theme settings override, and that a `:root` override in the page head can override again.
   Default preset is "light" when no attribute is set
   ========================================================================== */

/* ============================================================
   LIGHT PRESET (DEFAULT) - shadcn/Vercel
   Syne font, black palette, rounded buttons, minimal shadows
   ============================================================ */
@layer sn-defaults {
/* No --nav-* / --footer-* / --icon-color tokens here on purpose. They were
   introduced for the six colour presets; with presets removed the nav, footer
   and icons take their colours from the component and card tokens as they did
   originally, via the fallbacks in each module. */
:root {
  /* Typography - Syne */
  --font-family-heading: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-body: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  /* Type scale. h1 anchors at 48px and each level steps down from there.
     Was display 48 / h1 36 / h2 24 / h3 20, which left every heading on the site
     smaller than the hero it sat under. Light preset only; the other four preset
     blocks stay byte-identical. */
  --font-size-display: 3.75rem;  /* 60px */
  --font-size-h1: 3rem;          /* 48px */
  --font-size-h2: 2.25rem;       /* 36px */
  --font-size-h3: 1.75rem;       /* 28px */
  --font-size-h4: 1.375rem;      /* 22px */
  --font-size-h5: 1.125rem;      /* 18px */
  --font-size-h6: 1rem;          /* 16px */
  --font-size-body: 0.875rem;
  --font-size-lg: 1rem;
  --font-size-sm: 0.8125rem;
  --font-size-xs: 0.75rem;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 600;
  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 1.75;
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;

  /* Colors - monochrome ramp + ONE hue (design direction 2026-09).
     The theme is black / white / grey. #3B63F5 is the single accent: links,
     focus rings, active and selected states, progress fills, the current
     pagination item, the current step marker, and the eyebrow pill. It is a
     highlight, never a coat of paint -- body copy, headings, borders and
     page grounds stay neutral.
     Every value here is also a theme setting; see the "Colour" group in
     fields.json and the palette block in partials/theme-styles.html. */
  --color-primary: #262626;
  --color-secondary: #686868;
  --color-accent: #3B63F5;

  /* THE RAMP IS DERIVED, NOT TRANSCRIBED.
     Every value below is a mix of --color-accent, so reassigning that one
     property from the page head moves the hover, the pill ground, the
     chips, the bar fills, the track and the wash with it. Shipping them as
     six independent hex literals is what left a magenta override with blue
     chips and blue bars.

     Each line is stated twice on purpose: the literal first, as the brief
     writes it, for any engine without color-mix(); then the derived form,
     which wins wherever color-mix() parses. The percentages and bases are
     tuned so the DEFAULT computes to the brief's own value -- measured, not
     assumed:

       tint         8% accent on transparent  -> rgba(59,99,245,0.08)  exact
       tint-strong 12% accent on #FFFFFF      -> #E7ECFE  (blue 1/255 under
                    #E7ECFF; unreachable exactly -- 12% of a 245-blue on a
                    255-blue ground cannot reach 255)
       soft        55% accent on #FFF6E5      -> #93A5EE  exact
       track        8% accent on #FFFEF8      -> #EFF2F8  exact
       wash         5% accent on #FFFFFF      -> #F5F7FE  (green and blue
                    1/255 under #F5F8FF; same ceiling)
       hover       70% accent on #062087      -> #2B4FD4  exact

     The off-white and deep-navy bases are not decoration: they are the
     grounds that make those percentages land on the brief's numbers. The
     brief's hover is a deepened accent rather than a dimmed one, so a plain
     mix with black cannot reach it (accent+black can only ever produce a
     scalar multiple of the accent: the closest is #3254D0). The cost of the
     navy base is that a radically different accent carries a trace of it --
     #FF00FF hovers to #B40ADB. If hue-neutral darkening ever matters more
     than matching the brief, this one line becomes
     `color-mix(in srgb, var(--color-accent) 85%, #000)`.

     track and wash deliberately keep their few percent of accent rather than
     being flat greys: they are the theme's cool near-neutrals, and they are
     expected to tint with the accent, not stay blue underneath a new one. */
  --color-accent-hover: #2B4FD4;
  --color-accent-hover: color-mix(in srgb, var(--color-accent) 70%, #062087);
  --color-accent-tint: rgba(59, 99, 245, 0.08);
  --color-accent-tint: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --color-accent-tint-strong: #E7ECFF;
  --color-accent-tint-strong: color-mix(in srgb, var(--color-accent) 12%, #FFFFFF);
  --color-accent-soft: #93A5EE;
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 55%, #FFF6E5);
  --color-track: #EFF2F8;
  --color-track: color-mix(in srgb, var(--color-accent) 8%, #FFFEF8);
  /* Neutral. A 5% accent wash behind a white card read as a blue panel sitting
     on the grey page -- "a blue wanna-be bg over the gray bg". The wash is a
     step off the page ground, not a colour. 1.5% keeps it moving under a
     :root accent override without tinting it at rest. */
  --color-wash: #F6F7F9;
  --color-wash: color-mix(in srgb, var(--color-accent) 1.5%, #F7F8FA);
  --color-background: #ffffff;
  --color-foreground: #262626;
  --color-error: #d21a20;
  --color-success: #008258;
  --color-warning: #c47b00;

  /* Status Colors */
  --color-status-draft: #686868;
  --color-status-draft-bg: #f4f4f5;
  --color-status-draft-text: #404040;
  --color-status-generated: #3080ff;
  --color-status-generated-bg: #eff6ff;
  --color-status-generated-text: #1447e6;
  --color-status-sent: #ac4bff;
  --color-status-sent-bg: #f5f3ff;
  --color-status-sent-text: #6d28d9;
  --color-status-accepted: #00bb7f;
  --color-status-accepted-bg: #f0fdf4;
  --color-status-accepted-text: #007956;
  --color-status-declined: #fb2c36;
  --color-status-declined-bg: #fef2f2;
  --color-status-declined-text: #bf000f;
  --color-status-fulfilled: #f99c00;
  --color-status-fulfilled-bg: #fffbeb;
  --color-status-fulfilled-text: #b75000;
  --color-status-closed: #686868;
  --color-status-closed-bg: #f4f4f5;
  --color-status-closed-text: #404040;
  --color-status-inactive: #a1a1a1;
  --color-status-inactive-bg: #fafafa;
  --color-status-inactive-text: #686868;

  --color-on-accent: #fafafa;
  /* PAGE GROUND. This preset shipped #ffffff while fields.json ships the Body
     Background Color field as #FAFAFA, so the ground was only ever #fafafa on
     pages where partials/theme-styles.html happened to EMIT the setting. Any
     page whose saved value matches that partial's guard default emits nothing
     and fell straight through to this line — which is why the body still read
     white on /webinar, /waitlist and the blog after the field default was
     changed. The preset is the last line of defence, so it now states the
     theme's real ground. Cards stay #ffffff and lift off it. */
  --color-body-bg: #fafafa;
  --color-cards-bg: #ffffff;
  /* Neutral ramp, retuned to the 2026-09 direction:
     ink #0B0F1C / body #3A4152 / muted #8A93A8 / hairline #EEF1F8. */
  --color-border: #EEF1F8;
  --color-border-hover: #EEF1F8;
  --color-muted: #8A93A8;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-text: #3A4152;
  /* SECONDARY BODY COPY IS NOT THE "MUTED" STEP.
     The direction's muted value, #8A93A8, is for de-emphasised marks -- a unit
     next to a number, an inert chip. Most of the theme's card descriptions,
     bios, feature lines and nav sub-labels read this token instead, and at
     #8A93A8 they measured 2.95-3.08:1 on the page ground: sixteen distinct
     failures across /, /pricing, /services, /resources, /team and /features.
     It is therefore the midpoint of the direction's own two steps -- half body,
     half muted -- which measures 5.4:1 on white and 5.2:1 on #fafafa, still
     visibly lighter than body copy at 9.4:1. Derived, so it stays on the ramp
     if either end of it is retuned. */
  --color-text-muted: #626A7D;
  --color-text-muted: color-mix(in srgb, var(--color-text) 50%, var(--color-muted));
  --color-heading: #0B0F1C;
  /* The link tokens are the accent's, so anything reading them picks up the
     one hue. `a` itself resolves --type-link-color first (a typography
     setting), which is what keeps the nav and the card wrappers neutral. */
  /* Links are INK, not accent. Accent links made card links blue on some pages
     and black on others depending on which component drew them, and the client
     wants them black everywhere. The accent moves to hover, where it still
     signals interactivity without colouring a page full of "Read more" rows. */
  --color-link: var(--color-heading);
  --color-link-hover: var(--color-accent);
  --color-card-bg: #ffffff;
  --color-accent-light: rgba(0, 0, 0, 0.04);
  --color-icon: #686868;

  /* Code Block - Light theme (GitHub-inspired) */
  --code-bg: #f6f8fa;
  --code-border: #d0d7de;
  --code-header-bg: #f0f3f6;
  --code-text: #24292f;
  --code-text-muted: #656d76;
  --code-keyword: #cf222e;
  --code-string: #0a3069;
  --code-number: #0550ae;
  --code-comment: #6e7781;
  --code-function: #8250df;
  --code-operator: #24292f;
  --code-punctuation: #24292f;
  --code-success: #1a7f37;
  --code-scrollbar: rgba(0, 0, 0, 0.15);

  /* Spacing */
  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.375rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;
  --space-5xl: 6rem;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

  /* Buttons */
  --btn-padding-x: 1rem;
  --btn-padding-y: 0.5rem;
  --btn-padding-x-sm: 0.875rem;
  --btn-padding-y-sm: 0.375rem;
  --btn-padding-x-lg: 1.5rem;
  --btn-padding-y-lg: 0.625rem;
  --btn-font-size: 1rem;
  --btn-font-weight: 500;
  --btn-border-radius: 24px;
  --btn-border-width: 1px;
  --btn-primary-border-width: 0;
  --btn-primary-bg: #262626;
  --btn-primary-bg-size: 100% 100%;
  --btn-primary-bg-position: 0 0;
  --btn-primary-bg-position-hover: 0 0;
  --btn-primary-bg-hover: #3c3c3c;
  --btn-primary-color: #ffffff;
  --btn-primary-color-hover: #ffffff;
  --btn-primary-border: transparent;
  --btn-primary-border-hover: transparent;
  --btn-secondary-bg: transparent;
  --btn-secondary-color: #000000;
  --btn-secondary-border: #000000;
  --btn-secondary-bg-hover: #000000;
  --btn-secondary-color-hover: #ffffff;
  --btn-secondary-border-hover: #000000;
  --btn-ghost-bg: rgba(0, 0, 0, 0.05);
  --btn-ghost-color: #000000;
  --btn-ghost-border: transparent;
  --btn-ghost-bg-hover: rgba(0, 0, 0, 0.15);
  --btn-shadow: none;
  --btn-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);

  /* CTA Banner Backgrounds */
  --cta-dark-bg: linear-gradient(135deg, #3f3f46 0%, #18181b 100%);
  --cta-light-bg: linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%), var(--color-cards-bg);

  /* Forms/Inputs */
  --input-padding-x: 0.75rem;
  --input-padding-y: 0.5rem;
  --input-font-size: 0.875rem;
  --input-border-radius: 0.375rem;
  --input-border-width: 1px;
  --input-border-color: rgba(0, 0, 0, 0.10);
  --input-border-color-focus: #262626;
  --input-bg: #ffffff;
  --input-bg-focus: #ffffff;
  --input-color: #09090b;
  --input-placeholder: #a1a1aa;
  --input-border: #e4e4e7;
  --input-border-focus: #18181b;

  /* Cards */
  --card-padding: 1.5rem;
  --card-border-radius: 0.5rem;
  --card-border-width: 1px;
  --card-border-color: #e4e4e7;
  --card-bg: #ffffff;
  --card-shadow: none;
  --card-image-height: 12rem;
  --card-image-height-mobile: 10rem;

  /* Layout */
  --header-height: 56px;
  --container-max-width: 1100px;
  --container-padding: 1rem;
  --section-padding: 4rem;
  --section-padding-desktop: 4rem;
  --section-padding-tablet: 3rem;
  --section-padding-mobile: 2rem;

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 200ms ease;
  --transition-slower: 300ms ease;

  /* Z-Index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* Gradients */
  --gradient-1: linear-gradient(to bottom right, #18181b, #27272a);
  --gradient-2: linear-gradient(to bottom, #ffffff, #fafafa);
  --gradient-3: linear-gradient(to bottom, transparent, #ffffff);

  /* Color scheme helpers */
  --color-on-dark: #fafafa;
  --color-muted-on-dark: rgba(250, 250, 250, 0.7);
  --color-border-on-dark: rgba(250, 250, 250, 0.15);
  --color-on-light: #09090b;
  --color-muted-on-light: rgba(9, 9, 11, 0.6);
  --color-border-on-light: rgba(9, 9, 11, 0.08);

  /* Icon styling */
  --icon-fill: 0;
  --icon-weight: 300;
  --icon-grade: 0;
  --icon-opsz: 24;

  /* Hero/Banner heights */
  /* `short` is the small-hero value used by the legal pages, /pillar, /resources and
     job detail -- pages whose hero is a title and one line, nothing more. 400px was
     still most of a laptop viewport for that content. Light preset only; the other
     four preset blocks stay byte-identical. */
  --hero-height-short: 280px;
  --hero-height-regular: 600px;
  --hero-height-tall: 800px;
  --hero-height-short-mobile: 220px;
  --hero-height-regular-mobile: 400px;
  --hero-height-tall-mobile: 500px;
  --hero-desc-max-width: 640px;
  --hero-form-max-width: 480px;

  /* Content max widths */
  --content-max-width-narrow: 580px;
  --content-max-width-medium: 640px;
  --content-max-width-wide: 800px;
  --modal-max-width-sm: 600px;
  --modal-max-width-md: 800px;
  --modal-max-width-lg: 1440px;

  /* Component sizes */
  --logo-max-height: 40px;
  --avatar-size-sm: 24px;
  --avatar-size-md: 200px;
  --avatar-size-lg: 240px;
  --textarea-min-height: 100px;
  --loader-size: 80px;

  /* ------------------------------------------------------------------
     THE ACCENT BUDGET

     This theme is monochrome. Blue is punctuation, not a coat of paint.
     Blue is allowed on, and only on:
       - the eyebrow pill
       - link HOVER, and focus / active / selected states (links rest as ink)
       - ONE key figure per section (a KPI number, a chart's lead series)
       - the completed run of a progress indicator (steps, timeline, bars)
       - a single deliberate accent surface per section (e.g. the Connect card)

     Everything else -- icon glyphs, icon tiles, list marks, decorative
     rules -- is ink or grey, and takes the accent only when an editor
     explicitly asks for it on that instance. The tokens below are the
     default a component reaches for; overriding --color-accent still moves
     everything that IS in the budget, because those reference the accent
     directly rather than these.
     ------------------------------------------------------------------ */
     The distinction that matters is GLYPH vs TILE:
       - a small line icon is one sparse mark and IS the accent's job. Blue.
       - a 56px solid filled tile is a surface, and a row of them reads as a
         blue product. Neutral ground, ink glyph.
     Ink glyphs on white cards were tried and look deader than the blue did. */
  --icon-ink: var(--color-accent);
  --icon-tile-bg: var(--color-track);
  --icon-tile-ink: var(--color-heading);

  /* Eyebrow pill. One role, one treatment -- see the eyebrow rule in
     css/theme-overrides.css. Every value is a token so a `:root` override in the head
     that reassigns :root restyles every eyebrow on the site, and so a dark
     section can flip the ground and the ink by inheritance alone. */
  --eyebrow-bg: var(--color-accent-tint);
  /* Body font, NOT mono. Mono was tried on the eyebrow pill across the whole
     site and rejected on sight -- every section label read as a code snippet.
     The pill's ground and accent ink are enough to separate it from body copy;
     it does not need a second typeface to do that job.
     Mono is now reserved for actual code surfaces (the snippet card). */
  --eyebrow-font-family: var(--font-family-body);
  --eyebrow-letter-spacing: 0;
  /* The deepened accent, not the accent itself. The direction states the pill ink
     as #3B63F5, but #3B63F5 on the 8% accent tint measures 4.23:1 -- under AA for
     15px/500, and this theme is going to marketplace review. --color-accent-hover
     is the same hue one step darker (#2B4FD4, ~6.0:1) and is itself derived from
     --color-accent, so a :root override still moves it. To go back to the letter
     of the spec, this one line becomes var(--color-accent). */
  --eyebrow-color: var(--color-accent-hover);
  --eyebrow-padding-y: 4px;
  --eyebrow-padding-x: 12px;
  --eyebrow-radius: 20px;
  --eyebrow-font-size: 15px;
  --eyebrow-font-weight: 500;
  --eyebrow-line-height: 16px;
  /* Chrome - nav / footer / icons. White nav rail lifting off the #fafafa
     ground, graphite footer. Contrast: nav fg 15.1:1, nav muted 5.6:1,
     footer fg 14.5:1, footer muted 8.9:1. */
}
}


/* ============================================================
   BASE STYLES
   ============================================================ */
body {
  background-color: var(--color-body-bg);
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  color: var(--color-heading);
  font-weight: var(--font-weight-semibold);
}

h1 { font-size: var(--font-size-h1); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); }
h2 { font-size: var(--font-size-h2); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); }
h3 { font-size: var(--font-size-h3); line-height: var(--line-height-snug); }
h4 { font-size: var(--font-size-h4); line-height: var(--line-height-snug); }
h5 { font-size: var(--font-size-h5); line-height: var(--line-height-normal); }
h6 { font-size: var(--font-size-h6); line-height: var(--line-height-normal); }

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.hs-button,
button[type="submit"],
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  font-family: var(--font-family-body);
  line-height: 1.5;
  text-decoration: none;
  border-radius: var(--btn-border-radius);
  border: var(--btn-primary-border-width) solid var(--btn-primary-border);
  background: var(--btn-primary-bg);
  background-size: var(--btn-primary-bg-size, 100% 100%);
  background-position: var(--btn-primary-bg-position, 0 0);
  color: var(--btn-primary-color);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  transition: background-position var(--transition-slow), color var(--transition-slow), border-color var(--transition-slow), box-shadow var(--transition-slow);
}

.hs-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-position: var(--btn-primary-bg-position-hover, 0 0);
  border-color: var(--btn-primary-border-hover);
  color: var(--btn-primary-color-hover);
  box-shadow: var(--btn-shadow-hover);
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  font-family: var(--font-family-body);
  line-height: 1.5;
  text-decoration: none;
  border-radius: var(--btn-border-radius);
  border: var(--btn-primary-border-width) solid var(--btn-primary-border);
  background: var(--btn-primary-bg);
  background-size: var(--btn-primary-bg-size, 100% 100%);
  background-position: var(--btn-primary-bg-position, 0 0);
  color: var(--btn-primary-color);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  transition: background-position var(--transition-slow), color var(--transition-slow), border-color var(--transition-slow), box-shadow var(--transition-slow);
}

.primary-button:hover {
  background-position: var(--btn-primary-bg-position-hover, 0 0);
  border-color: var(--btn-primary-border-hover);
  color: var(--btn-primary-color-hover);
  box-shadow: var(--btn-shadow-hover);
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  font-family: var(--font-family-body);
  line-height: 1.5;
  text-decoration: none;
  border-radius: var(--btn-border-radius);
  border: var(--btn-border-width) solid var(--btn-secondary-border);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.secondary-button:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-border-hover);
  color: var(--btn-secondary-color-hover);
}

/* Tertiary button on dark sections */
[data-scheme="dark"] .tertiary-button,
[data-scheme="accent"] .tertiary-button,
[data-scheme="gradient"] .tertiary-button,
.dark-section .tertiary-button,
.banner .tertiary-button {
  border-color: var(--color-border-on-dark);
  color: var(--color-on-dark);
}

[data-scheme="dark"] .tertiary-button:hover,
[data-scheme="accent"] .tertiary-button:hover,
[data-scheme="gradient"] .tertiary-button:hover,
.dark-section .tertiary-button:hover,
.banner .tertiary-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-on-dark);
  color: var(--color-on-dark);
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  font-family: var(--font-family-body);
  line-height: 1.5;
  text-decoration: none;
  border-radius: var(--btn-border-radius);
  border: var(--btn-border-width) solid var(--btn-ghost-border);
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-color);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.ghost-button:hover {
  background: var(--btn-ghost-bg-hover);
  color: var(--color-foreground);
}

.button-sm {
  padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
  font-size: var(--font-size-sm);
}

.button-lg {
  padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
  font-size: var(--font-size-lg);
}

/* Light theme button icons */
.primary-button,
.secondary-button,
.ghost-button {
  gap: 8px;
  height: 40px;
}

.primary-button .btn-icon,
.secondary-button .btn-icon,
.ghost-button .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.25);
  color: inherit;
  font-size: 16px;
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}

.secondary-button .btn-icon,
.ghost-button .btn-icon {
  background: rgba(0, 0, 0, 0.1);
}

.primary-button:hover .btn-icon,
.ghost-button:hover .btn-icon {
  transform: rotate(45deg);
}

.secondary-button:hover .btn-icon {
  background: rgba(255, 255, 255, 0.25);
  transform: rotate(45deg);
}

/* Link with icon */
.link-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-heading);
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  font-family: var(--font-family-heading);
  transition: 0.2s ease;
}

.link-icon .link-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-icon .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.1);
  color: var(--color-heading);
  font-size: 14px;
  border-radius: 50%;
  transition: 0.2s ease;
}

.link-icon:hover {
  opacity: 0.7;
}

.link-icon:hover .btn-icon {
  transform: rotate(45deg);
}

.link-icon-light {
  color: #fff;
}

.link-icon-light .btn-icon {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* ============================================================
   FORMS
   ============================================================ */
.hs-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--input-font-size);
  font-family: var(--font-family-body);
  line-height: var(--line-height-normal);
  color: var(--input-color);
  background-color: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.hs-input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  background-color: var(--input-bg-focus);
}

.hs-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--card-bg);
  border-radius: var(--card-border-radius);
  border: var(--card-border-width) solid var(--card-border-color);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

/* Card law: shadow only. The -2px lift is gone. */
.card-hover:hover {
  box-shadow: var(--card-law-shadow-hover);
  transform: none;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.title-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-accent);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-accent {
  color: var(--color-accent);
}

.bg-accent-light {
  background-color: var(--color-accent-light);
}

.hover-lift {
  /* neutralized: portfolio-card lift-on-hover was explicitly rejected */
}

.hover-lift:hover {
}