/*
 * QHL (On Q Home Loans, onqhomeloans.com) theme — ALP-2302
 *
 * Design tokens sourced from @guaranteed-rate/ui-tokens@0.3.2/dist/onq/tokens.css
 * (QHL's brand code in ui-tokens is `onq`, while ui-themes and this folder use
 * `qhl` — same cross-package inconsistency as Premia `pre`/`premia`.)
 *
 * Fonts sourced from @guaranteed-rate/ui-themes@0.4.2/dist/qhl/v1/fonts/
 * (Self-hosted under /css/fonts/{open-sans,roboto}/ per JV nginx routing.
 * Relative URLs below resolve against /css/theme.css → nginx `location /css`
 * and Vite's `^/(img/|css/)` proxy both scope to the current JV container.)
 *
 * Naming: autodm's legacy camelCase variable names are preserved (Option A);
 * QHL's kebab-case token names are hand-translated at assignment time.
 * `--color-secondary-action-2-*` is kept hyphenated (translated from ui-tokens'
 * `action2`) to match the Tailwind mapping in configs/gr-react-tailwind and the
 * sole consumer of `bg-secondary-action-2-*` in RateAppBanner.tsx.
 *
 * Sample PR: https://github.com/Guaranteed-Rate/alp-web/pull/1943
 *
 * AUDIT / OPEN QUESTIONS carried forward from ALP-2302 analysis:
 *   - Primary button hover flips to orange `#ffac1d` with white text — WCAG AA
 *     contrast ~1.9:1 (fails). Applied verbatim per QHL ui-tokens semantic
 *     layer; other QHL applications use the same design (per PM). Any AA fix
 *     should originate upstream in @guaranteed-rate/ui-tokens.
 *   - `--color-primary-logo: #3594b3` differs from `--color-primary-brand-base:
 *     #3694b3` by one hex digit — applied verbatim per QHL tokens.
 *   - `--font-weight-black: 800` per QHL tokens (Premia/Rate default = 900).
 *   - Line-heights applied as unitless values per QHL tokens (differs from the
 *     rem-based scale used by CWHM/Premia/KBHS).
 *   - `--shared-gradient-1`: no QHL-branded gradient in tokens — the Rate red
 *     autodm baseline is preserved per PM direction until QHL provides one.
 *   - Open Sans woff2 files upstream (@guaranteed-rate/ui-themes@0.4.2) are
 *     byte-identical across all weight labels (bug: regular weight file shipped
 *     4× under different weight names). Bold/semibold/extrabold declarations
 *     below will render regular glyphs; the browser may synthesize bold via
 *     font-synthesis. Roboto files are correct. When upstream ships real
 *     weight files, a re-copy into ./fonts/open-sans/ fixes this transparently.
 */
:root {
  --border-radius-button: 0px;
  --border-radius-circle: 9999px; /* AUDIT: QHL tokens use a pill (9999px), not the 50% circle other JVs default to */
  --border-radius-heavy: 9999px;
  --border-radius-light: 2px;
  --border-radius-medium: 8px;
  --border-radius-square: 0;
  --border-radius-strong: 12px;
  --border-radius-stronger: 24px;
  --border-width-large: 4px;
  --border-width-medium: 3px;
  --border-width-small: 2px;
  --border-width-xLarge: 5px;
  --border-width-xSmall: 1px;
  --color-credit-excellent: #28a745;
  --color-credit-fair: #ffaa2b;
  --color-credit-good: #17a2b8;
  --color-credit-poor: #dc3545;
  --color-data-1: #1b365d;
  --color-data-2: #28a745;
  --color-data-3: #de5a3e;
  --color-data-4: #ffac1d;
  --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: #25282a;
  --color-primary-body-dark: #101213;
  --color-primary-body-light: #929394;
  --color-primary-brand-base: #3694b3;
  --color-primary-brand-dark: #2b84a6;
  --color-primary-brand-lightest: #ebf4f8;
  --color-primary-logo: #3594b3; /* AUDIT: QHL tokens set logo one hex digit off from brand-base (#3594b3 vs #3694b3) — applied verbatim */
  --color-secondary-action-2-base: #ffac1d;
  --color-secondary-action-2-dark: #e69100;
  --color-secondary-action-2-hover: #fff9f0;
  --color-secondary-action-2-light: #ffc766;
  --color-secondary-action-2-lighter: #ffdc9e;
  --color-secondary-action-2-lightest: #fff0d6;
  --color-secondary-action-base: #1b365d;
  --color-secondary-action-dark: #142b4d;
  --color-secondary-action-hover: #f4f7fb;
  --color-secondary-action-light: #97b1d8;
  --color-secondary-action-lighter: #cedbee;
  --color-secondary-action-lightest: #ecf1f9;
  --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: #3694b3;
  --color-secondary-input-dark: #2b84a6;
  --color-secondary-input-light: #9ac9d9;
  --color-secondary-input-lighter: #cce4ec;
  --color-secondary-input-lightest: #ebf4f8;
  --color-secondary-input-medium: #68afc6;
  --color-secondary-white: #ffffff;
  --color-status-critical-base: #dc3545;
  --color-status-critical-dark: #be0b13;
  --color-status-critical-lighter: #f7cdd1;
  --color-status-critical-lightest: #fbebec;
  --color-status-info-base: #2175da;
  --color-status-info-dark: #1355ca;
  --color-status-info-lightest: #eef4fc;
  --color-status-ok-base: #28a745;
  --color-status-ok-dark: #209938;
  --color-status-ok-lightest: #eaf6ed;
  --color-status-warning-base: #ffc107;
  --color-status-warning-dark: #eaa400;
  --color-status-warning-lightest: #fff9e6;
  --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: "Open Sans", sans-serif;
  --font-family-headline: Roboto, sans-serif;
  --font-family-primary: "Open Sans", sans-serif;
  --font-lineHeight-2xl: 1.2069;
  --font-lineHeight-2xs: 1.1765;
  --font-lineHeight-3xl: 1.194;
  --font-lineHeight-3xs: 1.1667;
  --font-lineHeight-4xl: 1.2;
  --font-lineHeight-4xs: 1.1538;
  --font-lineHeight-5xl: 1.2048;
  --font-lineHeight-5xs: 1.2;
  --font-lineHeight-l: 1.1842;
  --font-lineHeight-m: 1.2121;
  --font-lineHeight-s: 1.2;
  --font-lineHeight-xl: 1.2;
  --font-lineHeight-xs: 1.1905;
  --font-size-2xl: 3.5rem;
  --font-size-2xs: 1.25rem;
  --font-size-3xl: 4rem;
  --font-size-3xs: 1rem;
  --font-size-4xl: 4.5rem;
  --font-size-4xs: 0.875rem;
  --font-size-5xl: 6.25rem;
  --font-size-5xs: 0.75rem;
  --font-size-6xs: 0.6rem;
  --font-size-l: 2.5rem;
  --font-size-m: 2rem;
  --font-size-s: 1.75rem;
  --font-size-xl: 3rem;
  --font-size-xs: 1.5rem;
  --font-weight-black: 800; /* AUDIT: QHL tokens define black as 800 (Premia/Rate default = 900) */
  --font-weight-bold: 700;
  --font-weight-medium: 500; /* Not in QHL tokens; exposed for consumers using Roboto medium (500) */
  --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: var(--border-radius-medium);
  --shared-button-primary-font-color: var(--color-secondary-white);
  --shared-button-primary-backgroundColor: var(--color-secondary-action-base);
  --shared-button-primary-hover-backgroundColor: var(
    --color-secondary-action-2-base
  ); /* AUDIT: QHL semantic layer flips navy → orange on hover; white text on #ffac1d fails WCAG AA (contrast ~1.9:1) — matches other QHL apps per PM */
  --shared-button-primary-loader-color: var(--color-secondary-white);
  --shared-button-secondary-border-radius: var(--border-radius-medium);
  --shared-button-secondary-border-color: var(--color-secondary-action-base);
  --shared-button-secondary-border-width: 1px;
  --shared-button-secondary-font-color: var(--color-secondary-action-base);
  --shared-button-secondary-hover-backgroundColor: var(
    --color-secondary-action-hover
  );
  --shared-button-secondary-hover-border-color: var(
    --color-secondary-action-dark
  );
  --shared-button-secondary-hover-font-color: var(
    --color-secondary-action-dark
  );
  --shared-button-secondary-loader-color: var(--color-secondary-action-base);
  --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,
    #c82f24,
    #e3673a
  ); /* OPEN QUESTION: QHL tokens define no gradient — Rate red placeholder retained per PM until QHL supplies one */
  --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 Open Sans + Roboto — served from `apps/autodm/public/company/qhl/css/fonts/`.
 * Source: @guaranteed-rate/ui-themes@0.4.2/dist/qhl/v1/fonts/
 * Weight mapping matches the ui-themes reference stylesheet. Open Sans is used
 * for body/compliance (`--font-family-primary`, `--font-family-compliance`);
 * Roboto is used for headlines (`--font-family-headline`).
 * See AUDIT note above re: upstream Open Sans weight-file duplication.
 */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/open-sans/open-sans-regular.woff2") format("woff2");
  font-display: fallback;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/open-sans/open-sans-semibold.woff2") format("woff2");
  font-display: fallback;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/open-sans/open-sans-bold.woff2") format("woff2");
  font-display: fallback;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 800;
  src: url("./fonts/open-sans/open-sans-extrabold.woff2") format("woff2");
  font-display: fallback;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/roboto/roboto-regular.woff2") format("woff2");
  font-display: fallback;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/roboto/roboto-medium.woff2") format("woff2");
  font-display: fallback;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/roboto/roboto-semibold.woff2") format("woff2");
  font-display: fallback;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/roboto/roboto-bold.woff2") format("woff2");
  font-display: fallback;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 800;
  src: url("./fonts/roboto/roboto-extrabold.woff2") format("woff2");
  font-display: fallback;
}

/*
 * ── QHL-scoped component overrides ─────────────────────────────────────
 *
 * Dropdown line-height (QA #6, ALP-2302 QA report):
 * @guaranteed-rate/react-components' Dropdown sets its value's
 * `line-height: var(--font-lineHeight-m)`. QHL's token is unitless
 * `1.2121`, which collapses the value's line-box so the floated label
 * overlaps the selected value. Restore an absolute `2.5rem` (matches gri
 * numerically) — `<input>` (TextInput) is unaffected because native form
 * controls ignore CSS line-height for control sizing.
 *
 * Selector reuses the stable `div.dropdown` hook already used by
 * `apps/autodm/src/styles/global.css` (avoids the compiled hash class
 * `.s11bdbzb`, which can change on a library rebuild). `!important` is
 * required because the shipped `.s11bdbzb div.dropdown` outweighs plain
 * `div.dropdown` on specificity. Scope is QHL-only via this file being
 * served only for the QHL deployment.
 */
div.dropdown {
  line-height: 2.5rem !important;
}

/*
 * Checkbox checked-state contrast (QA #2, ALP-2302 QA report):
 * `Checkbox.tsx` renders the checked state using a pale
 * `--color-secondary-action-lightest` background and an explicit
 * `text-secondary-action-base` tick. For QHL, use a navy fill with a white
 * tick to match the requested checked-state treatment.
 * QHL-scoped so gri/cwhm/premia — 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;
}