/*
 * KBHS (K. Hovnanian American Mortgage) theme — ALP-2300
 *
 * Design tokens sourced from @guaranteed-rate/ui-tokens@0.3.2/dist/kbhs/tokens.css
 * Fonts sourced from @guaranteed-rate/ui-themes@0.4.2/dist/kbhs/v1/fonts/avenir-next-lt-pro/
 * (Self-hosted under /css/fonts/avenir-next-lt-pro/ per JV nginx routing.)
 *
 * Naming: autodm's legacy camelCase variable names are preserved (Option A);
 * KBHS's kebab-case token names are hand-translated at assignment time.
 * `--color-secondary-action-2-*` is kept hyphenated to match the sole consumer
 * (RateAppBanner.tsx → `bg-secondary-action-2-lighter`).
 *
 * OPEN QUESTIONS (design review):
 *   - `--shared-gradient-1`: no KBHS-branded gradient in tokens; using a
 *     yellow brand ramp as a placeholder.
 *   - `--font-lineHeight-*`: KBHS tokens specify unitless 1.2 for every step;
 *     preserving autodm's rem-based scale (matches Premia/CWHM) — flag if the
 *     design team wants a per-token unitless swap.
 *   - `--border-radius-circle`: KBHS tokens use 9999px (pill) instead of the
 *     50% circle that other JVs use — applied verbatim per tokens; see AUDIT
 *     comment inline.
 *   - `--font-weight-black`: KBHS tokens define 700 (not 900); applied per
 *     tokens — see AUDIT comment inline.
 */
:root {
  --border-radius-button: 0px;
  --border-radius-circle: 9999px; /* AUDIT: KBHS tokens use a pill (9999px), not the 50% circle other JVs default to */
  --border-radius-heavy: 9999px;
  --border-radius-light: 4px;
  --border-radius-medium: 8px;
  --border-radius-square: 0;
  --border-radius-strong: 24px;
  --border-radius-stronger: 40px;
  --border-width-large: 4px;
  --border-width-medium: 3px;
  --border-width-small: 2px;
  --border-width-xLarge: 5px;
  --border-width-xSmall: 1px;
  --color-credit-excellent: #53a8a0;
  --color-credit-fair: #ffaa2b;
  --color-credit-good: #1780a3;
  --color-credit-poor: #dc3545;
  --color-data-1: #1780a3;
  --color-data-2: #53a8a0;
  --color-data-3: #de5a3e;
  --color-data-4: #ffaa2b;
  --color-data-5: #d5c5a8;
  --color-effects-overlay: rgba(0, 0, 0, 0.15);
  --color-marketing-1-base: #ba9d69;
  --color-marketing-1-dark: #856a3e;
  --color-marketing-1-light: #eee6d9;
  --color-marketing-1-lighter: #f5f1e9;
  --color-marketing-2-base: #f1694c;
  --color-marketing-2-dark: #be3d26;
  --color-marketing-2-light: #f8b4a5;
  --color-marketing-2-lighter: #fde9e4;
  --color-marketing-3-base: #54ba83;
  --color-marketing-3-dark: #327c53;
  --color-marketing-3-light: #d4eee0;
  --color-marketing-3-lighter: #e6f5ed;
  --color-marketing-4-base: #c12950;
  --color-marketing-4-dark: #b42042;
  --color-marketing-4-light: #e094a7;
  --color-marketing-4-lighter: #f6dfe5;
  --color-marketing-5-base: #ffbe16;
  --color-marketing-5-dark: #9f6400;
  --color-marketing-5-light: #ffebb9;
  --color-marketing-5-lighter: #fff5dc;
  --color-marketing-6-base: #2175da;
  --color-marketing-6-dark: #1355ca;
  --color-marketing-6-light: #c7dcf6;
  --color-marketing-6-lighter: #deeaf9;
  --color-marketing-7-base: #466476;
  --color-marketing-7-dark: #395466;
  --color-marketing-7-light: #a2b1ba;
  --color-marketing-7-lighter: #e4e8eb;
  --color-marketing-8-base: #e8c579;
  --color-marketing-8-dark: #936a1e;
  --color-marketing-8-light: #f9f0dd;
  --color-marketing-8-lighter: #fcf6eb;
  --color-primary-body-base: #141414;
  --color-primary-body-dark: #000000;
  --color-primary-body-light: #898989;
  --color-primary-brand-base: #ffc709;
  --color-primary-brand-dark: #e5b203;
  --color-primary-brand-lightest: #fffae7;
  --color-primary-logo: #ffc709;
  --color-secondary-action-2-base: #0c5879;
  --color-secondary-action-2-dark: #094a69;
  --color-secondary-action-2-hover: #f3f7f9;
  --color-secondary-action-2-light: #85abbc;
  --color-secondary-action-2-lighter: #c2d5de;
  --color-secondary-action-2-lightest: #e7eef2;
  --color-secondary-action-base: #0c5879;
  --color-secondary-action-dark: #094a69;
  --color-secondary-action-hover: #f3f7f9;
  --color-secondary-action-light: #85abbc;
  --color-secondary-action-lighter: #c2d5de;
  --color-secondary-action-lightest: #e7eef2;
  --color-secondary-inactive-base: #636363;
  --color-secondary-inactive-light: #b1b1b1;
  --color-secondary-inactive-lighter: #d8d8d8;
  --color-secondary-inactive-lightest: #f3f3f3;
  --color-secondary-inactive-medium: #767676;
  --color-secondary-input-base: #0c5879;
  --color-secondary-input-dark: #094a69;
  --color-secondary-input-light: #85abbc;
  --color-secondary-input-lighter: #c2d5de;
  --color-secondary-input-lightest: #e7eef2;
  --color-secondary-input-medium: #49829a;
  --color-secondary-white: #ffffff;
  --color-status-critical-base: #c12950;
  --color-status-critical-dark: #9f1f40;
  --color-status-critical-lighter: #efc9d3;
  --color-status-critical-lightest: #f8e9ed;
  --color-status-info-base: #1780a3;
  --color-status-info-dark: #106a88;
  --color-status-info-lightest: #e7f2f5;
  --color-status-ok-base: #53a8a0;
  --color-status-ok-dark: #3a7a75;
  --color-status-ok-lightest: #edf6f5;
  --color-status-warning-base: #ffaa2b;
  --color-status-warning-dark: #9f640c;
  --color-status-warning-lightest: #fff6e9;
  --effect-opacity-10: 0.1;
  --effect-opacity-15: 0.15;
  --effect-opacity-20: 0.2;
  --effect-opacity-30: 0.3;
  --effect-opacity-40: 0.4;
  --effect-opacity-50: 0.5;
  --effect-opacity-60: 0.6;
  --effect-opacity-70: 0.7;
  --effect-opacity-80: 0.8;
  --effect-opacity-90: 0.9;
  --effect-opacity-100: 1;
  --font-family-compliance: "Avenir Next", sans-serif;
  --font-family-headline: "Avenir Next", sans-serif;
  --font-family-primary: "Avenir Next", sans-serif;
  --font-lineHeight-2xl: 4rem;
  --font-lineHeight-2xs: 1.5rem;
  --font-lineHeight-3xl: 4.5rem;
  --font-lineHeight-3xs: 1.25rem;
  --font-lineHeight-4xl: 5rem;
  --font-lineHeight-4xs: 1rem;
  --font-lineHeight-5xs: 0.75rem;
  --font-lineHeight-l: 3rem;
  --font-lineHeight-m: 2.5rem;
  --font-lineHeight-s: 2rem;
  --font-lineHeight-xl: 3.5rem;
  --font-lineHeight-xs: 1.75rem;
  --font-size-2xl: 3.5rem;
  --font-size-2xs: 1rem;
  --font-size-3xl: 4rem;
  --font-size-3xs: 0.875rem;
  --font-size-4xl: 4.5rem;
  --font-size-4xs: 0.75rem;
  --font-size-l: 2.5rem;
  --font-size-m: 2rem;
  --font-size-s: 1.5rem;
  --font-size-xl: 3rem;
  --font-size-xs: 1.25rem;
  --font-weight-black: 700; /* AUDIT: KBHS tokens define black as 700 (not 900); heaviest available Avenir Next LT Pro weight in the ui-themes drop */
  --font-weight-bold: 700;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --layout-screen-large: 1024px;
  --layout-screen-medium: 768px;
  --layout-screen-small: 576px;
  --layout-screen-xLarge: 1200px;
  --layout-screen-xSmall: 375px;
  --layout-screen-xxLarge: 1440px;
  --layout-z-above: 1;
  --layout-z-below: -1;
  --layout-z-bottom: -999;
  --layout-z-default: 0;
  --layout-z-dropdown: 100;
  --layout-z-fixed: 300;
  --layout-z-modal: 600;
  --layout-z-modalBackdrop: 400;
  --layout-z-offcanvas: 500;
  --layout-z-popover: 700;
  --layout-z-sticky: 200;
  --layout-z-tooltip: 800;
  --layout-z-top: 999;
  --motion-transition-easeInOut-long: 400ms ease-in-out;
  --motion-transition-easeInOut-medium: 300ms ease-in-out;
  --motion-transition-easeInOut-short: 200ms ease-in-out;
  --skeletonLoader-defaultSkeleton-baseColor: #ebebeb;
  --skeletonLoader-defaultSkeleton-highlightColor: #f5f5f5;
  --space-xy-large-px: 32px;
  --space-xy-large-rem: 2rem;
  --space-xy-medium-px: 24px;
  --space-xy-medium-rem: 1.5rem;
  --space-xy-small-px: 16px;
  --space-xy-small-rem: 1rem;
  --space-xy-xLarge-px: 48px;
  --space-xy-xLarge-rem: 3rem;
  --space-xy-xSmall-px: 12px;
  --space-xy-xSmall-rem: 0.75rem;
  --space-xy-xxLarge-px: 72px;
  --space-xy-xxLarge-rem: 4.5rem;
  --space-xy-xxSmall-px: 8px;
  --space-xy-xxSmall-rem: 0.5rem;
  --space-xy-xxxLarge-px: 120px;
  --space-xy-xxxLarge-rem: 7.5rem;
  --space-xy-xxxSmall-px: 4px;
  --space-xy-xxxSmall-rem: 0.25rem;
  --shared-button-primary-border-radius: 0;
  --shared-button-primary-font-color: var(
    --color-primary-body-base
  ); /* Dark text on yellow brand — WCAG contrast on #ffc709 */
  --shared-button-primary-backgroundColor: var(--color-primary-brand-base);
  --shared-button-primary-hover-backgroundColor: var(
    --color-primary-brand-dark
  );
  --shared-button-primary-loader-color: var(--color-primary-body-base);
  --shared-button-secondary-border-radius: 0;
  --shared-button-secondary-border-color: var(--color-primary-brand-base);
  --shared-button-secondary-border-width: 2px;
  --shared-button-secondary-font-color: var(--color-primary-body-base);
  --shared-button-secondary-hover-backgroundColor: var(
    --color-primary-brand-lightest
  );
  --shared-button-secondary-hover-border-color: var(--color-primary-brand-dark);
  --shared-button-secondary-hover-font-color: var(--color-primary-body-dark);
  --shared-button-secondary-loader-color: var(--color-primary-brand-dark);
  --shared-button-tertiary-loader-color: var(--color-secondary-action-base);
  --shared-button-quaternary-loader-color: var(--color-primary-body-base);
  --shared-gradient-1: linear-gradient(
    45deg,
    var(--color-primary-brand-dark),
    var(--color-primary-brand-base)
  ); /* OPEN QUESTION: no KBHS-branded gradient in tokens — using a yellow brand ramp as a placeholder */
  --shared-gradient-2: linear-gradient(45deg, #222222, #444444);
  --shared-mobile-header-height: 4.25rem;
  --shared-desktop-header-height: 4.25rem;
  --shared-input-height: 3.25rem;
  --shared-marker-color: var(--color-primary-brand-base);
  --shared-modal-width: 40rem;
  --shared-modal-backdrop-filter: blur(5px);
  --shared-modal-background-color: var(--color-effects-overlay);
  --apple-mobile-backscroll-taskbar-height: 9rem;
}

/*
 * Self-hosted Avenir Next LT Pro — served from `apps/autodm/public/company/kbhs/css/fonts/`.
 * Relative URLs resolve against `/css/theme.css`, so `./fonts/...` becomes
 * `/css/fonts/...`, which nginx `location /css` and Vite's `^/(img/|css/)`
 * proxy both scope to the current JV (KBHS) container.
 * Source: @guaranteed-rate/ui-themes@0.4.2/dist/kbhs/v1/fonts/avenir-next-lt-pro/
 * Weight mapping matches the ui-themes reference stylesheet (regular=400,
 * medium=500, demi=600, bold=700). `font-weight: black` is aliased to 700
 * via `--font-weight-black` above per the KBHS token definition.
 */
@font-face {
  font-family: "Avenir Next";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/avenir-next-lt-pro/avenir-next-lt-pro-regular.woff2")
    format("woff2");
  font-display: fallback;
}

@font-face {
  font-family: "Avenir Next";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/avenir-next-lt-pro/avenir-next-lt-pro-medium.woff2")
    format("woff2");
  font-display: fallback;
}

@font-face {
  font-family: "Avenir Next";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/avenir-next-lt-pro/avenir-next-lt-pro-demi.woff2")
    format("woff2");
  font-display: fallback;
}

@font-face {
  font-family: "Avenir Next";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/avenir-next-lt-pro/avenir-next-lt-pro-bold.woff2")
    format("woff2");
  font-display: fallback;
}

/*
 * Checkbox checked-state contrast (parallel to QHL fix, ALP-2302 QA report):
 * `Checkbox.tsx` renders the checked state as a pale
 * `--color-secondary-action-lightest` background with the Radix Root
 * inheriting `text-primary-foreground` (white), producing a near-invisible
 * white tick on KBHS's pale `#e7eef2` (~1.17:1, fails WCAG 3:1). Fill
 * with the deep teal-navy `--color-secondary-action-base` (#0c5879) + white
 * tick → white-on-navy ≈ 9.3:1 (AAA). KBHS-scoped so other brands whose
 * `-lightest` values give acceptable contrast are untouched.
 */
button[role="checkbox"][data-state="checked"] {
  background-color: var(--color-secondary-action-base);
  border-color: var(--color-secondary-action-base);
}
button[role="checkbox"][data-state="checked"] svg {
  color: #ffffff;
}