/*
 * Premia (premia) Theme
 *
 * Token source: @guaranteed-rate/ui-tokens pre (Premia) v0.3.x
 * Theme source: @guaranteed-rate/ui-themes premia v0.4.x
 *
 * This file intentionally keeps all values on :root because autodm serves
 * one brand per deployment via a static file — there is no [data-theme] toggle
 * in the HTML shell. If a multi-brand toggle is ever needed, add
 * `data-theme="premia"` to <html> and scope the overrides accordingly.
 *
 * ── Sections ──────────────────────────────────────────────────────────────
 * 1. Google Fonts (Poppins — used for primary, headline, and compliance)
 *    NOTE: The @import below MUST remain the first CSS rule in this file
 *    (CSS spec §6.3: @import rules must precede all other at-rules and
 *    style rules). Moving it below any rule will silently break font loading
 *    in some browsers.
 *    Performance: consider replacing with <link rel="preconnect"> +
 *    <link rel="stylesheet"> in the HTML shell if render-blocking becomes an
 *    issue for Premia deployments. @guaranteed-rate/ui-themes also ships
 *    Poppins binaries under dist/premia/v1/fonts/poppins/ for self-hosting.
 * 2. Premia tokens (sourced from pre token JSON; kebab-case names in the
 *    published tokens are translated 1:1 into the legacy autodm camelCase
 *    names so no autodm/vendor consumer has to change — same discipline
 *    used by the cwhm reskin)
 * 3. AutoDM app-specific overrides (--shared-*, --skeletonLoader-*, --apple-*)
 *
 * ── Kebab → camelCase translations applied ────────────────────────────────
 *   --font-line-height-*              → --font-lineHeight-*
 *   --border-width-x-large / x-small  → --border-width-xLarge / xSmall
 *   --space-xy-x-*-*                  → --space-xy-x*-*  (xLarge/xSmall/xxLarge/xxSmall/xxxLarge/xxxSmall)
 *   --layout-z-modal-backdrop         → --layout-z-modalBackdrop
 *   --motion-transition-ease-in-out-* → --motion-transition-easeInOut-*
 *   --color-secondary-action2-*       → --color-secondary-action-2-*
 * Value in every case is the official Premia value from pre/tokens.css.
 *
 * ── Open question ─────────────────────────────────────────────────────────
 * --shared-gradient-1 was Rate red (linear-gradient(45deg, #c82f24, #e3673a))
 * and has no token equivalent for Premia. A placeholder gradient using the
 * Premia brand blue is used below; the design team must confirm the correct
 * Premia gradient values before go-live.
 *
 * ── Reviewer notes (intentional Premia design deltas from CWHM/gri) ───────
 * - Font weights: Poppins caps at 700, so black=700 (not 900), bold=500
 *   (not 700), semibold=500 (not 600). Any Tailwind font-black/font-bold
 *   consumer will render lighter on Premia than on CWHM — this is intent.
 * - Line heights: unitless 1.2 for every size (not absolute rems). Yields
 *   tighter typography than CWHM/gri — Premia intent.
 * - Font-size scale for xs/2xs/3xs/4xs shifts one step larger than gri
 *   (e.g. --font-size-2xs = 1.25rem vs gri 1rem) — Premia intent.
 * - Border radii differ: --border-radius-button = 6px (not 9999px pill),
 *   --border-radius-strong = 24px, --border-radius-stronger = 40px.
 * - Layout z-index scale is compressed toward higher values (modal=900,
 *   modalBackdrop=890, tooltip=920). Verify overlays still stack correctly.
 */

/* ── 1. Google Fonts ───────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/* ── 2. Premia tokens ──────────────────────────────────────────────────── */
:root {
  /* border-radius */
  --border-radius-circle: 9999px; /* was 50% — AUDIT: non-square elements may render differently */
  --border-radius-heavy: 9999px;
  --border-radius-light: 4px;
  --border-radius-medium: 8px; /* was 12px */
  --border-radius-square: 0;
  /* new pre tokens */
  --border-radius-button: 6px;
  --border-radius-strong: 24px;
  --border-radius-stronger: 40px;

  /* border-width */
  --border-width-large: 4px;
  --border-width-medium: 3px;
  --border-width-small: 2px;
  --border-width-xLarge: 5px;
  --border-width-xSmall: 1px;

  /* credit */
  --color-credit-excellent: #53a8a0; /* was #54ba83 */
  --color-credit-fair: #ffaa2b; /* was #ffbe16 */
  --color-credit-good: #1780a3; /* was #2175da */
  --color-credit-poor: #c12950;

  /* data */
  --color-data-1: #1780a3; /* was #2175da */
  --color-data-2: #53a8a0; /* was #54ba83 */
  --color-data-3: #de5a3e;
  --color-data-4: #ffaa2b; /* was #ffbe16 */
  --color-data-5: #d5c5a8;

  /* marketing */
  --color-marketing-1-base: #ac8c51; /* was #ba9d69 */
  --color-marketing-1-dark: #886b3a; /* was #856a3e */
  --color-marketing-1-light: #d5c5a8; /* was #eee6d9 */
  --color-marketing-1-lighter: #f3eee5; /* was #f5f1e9 */
  --color-marketing-2-base: #f1694c; /* was #de5a3e */
  --color-marketing-2-dark: #be3d26;
  --color-marketing-2-light: #f8b4a5; /* was #eeac9e */
  --color-marketing-2-lighter: #fde9e4; /* was #fae7e2 */
  --color-marketing-3-base: #53a8a0; /* was #54ba83 */
  --color-marketing-3-dark: #459990; /* was #327c53 */
  --color-marketing-3-light: #a9d3cf; /* was #d4eee0 */
  --color-marketing-3-lighter: #e5f2f1; /* was #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: #1780a3; /* was #2175da */
  --color-marketing-6-dark: #106a88; /* was #1355ca */
  --color-marketing-6-light: #c5dfe8; /* was #c7dcf6 */
  --color-marketing-6-lighter: #dcecf1; /* was #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: #2a7753; /* was #e8c579 */
  --color-marketing-8-dark: #216745; /* was #936a1e */
  --color-marketing-8-light: #94bba9; /* was #f9f0dd */
  --color-marketing-8-lighter: #dfebe5; /* was #fcf6eb */

  /* primary brand (Premia blue) */
  --color-primary-body-base: #222222; /* was #25282a */
  --color-primary-body-dark: #1b1b1b; /* was #101213 */
  --color-primary-body-light: #909090; /* new pre token */
  --color-primary-brand-base: #12487d; /* was #d13239 */
  --color-primary-brand-dark: #0e3b6d; /* was #a12026 */
  --color-primary-brand-lightest: #e7edf2; /* was #faeaeb */
  --color-primary-logo: #542a0d; /* new pre token — distinct warm-brown logo mark */

  /* secondary action (Premia blue replaces Rate blue / Citywide gold) */
  --color-secondary-action-2-base: #12487d; /* was #ba9d69 */
  --color-secondary-action-2-dark: #0e3b6d; /* was #856a3e */
  --color-secondary-action-2-light: #88a3be; /* was #eee6d9 */
  --color-secondary-action-2-lighter: #c4d1de; /* was #f5f1e9 */
  --color-secondary-action-2-lightest: #e7edf2; /* was #f8f5f0 */
  --color-secondary-action-base: #12487d; /* was #2175da */
  --color-secondary-action-dark: #0e3b6d; /* was #1355ca */
  --color-secondary-action-hover: #f3f6f8; /* was #f4f8fd */
  --color-secondary-action-light: #88a3be; /* was #c7dcf6 */
  --color-secondary-action-lighter: #c4d1de; /* was #deeaf9 */
  --color-secondary-action-lightest: #e7edf2; /* was #eef4fc */

  /* secondary inactive (Premia neutrals) */
  --color-secondary-inactive-base: #5e6265; /* was #636363 */
  --color-secondary-inactive-light: #c7c9ca; /* was #b1b1b1 */
  --color-secondary-inactive-lighter: #dedfe0; /* was #d8d8d8 */
  --color-secondary-inactive-lightest: #f2f2f2; /* was #f3f3f3 */
  --color-secondary-inactive-medium: #797d7f; /* was #8a8a8a */

  /* secondary input (Premia light-blue set) */
  --color-secondary-input-base: #709ed0; /* was #2175da */
  --color-secondary-input-dark: #608fc6; /* new pre token */
  --color-secondary-input-light: #b7cfe7; /* new pre token */
  --color-secondary-input-lighter: #dbe7f3; /* was #deeaf9 */
  --color-secondary-input-lightest: #f1f5fa; /* was #eef4fc */
  --color-secondary-input-medium: #94b6dc; /* was #90baec */
  --color-secondary-white: #ffffff;

  /* status (Premia palette — teal info/ok, warm warning/critical) */
  --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; /* was #2175da */
  --color-status-info-dark: #106a88; /* was #1355ca */
  --color-status-info-lightest: #e7f2f5; /* was #eef4fc */
  --color-status-ok-base: #53a8a0; /* was #54ba83 */
  --color-status-ok-dark: #3a7a75; /* was #327c53 */
  --color-status-ok-lightest: #edf6f5; /* was #eef8f2 */
  --color-status-warning-base: #ffaa2b; /* was #ffbe16 */
  --color-status-warning-dark: #9f640c; /* was #9f6400 */
  --color-status-warning-lightest: #fff6e9; /* was #fff5dc */

  /* new pre token */
  --color-effects-overlay: rgba(0, 0, 0, 0.15);

  /* effects — carried over unchanged (brand-agnostic, not in pre tokens) */
  --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;

  /* typography — font families (Poppins used for all three roles) */
  --font-family-compliance:
    Poppins, sans-serif; /* was Proxima Nova Condensed — Premia has no condensed face */
  --font-family-headline: Poppins, sans-serif; /* was Proxima Nova */
  --font-family-primary: Poppins, sans-serif; /* was Proxima Nova */

  /* typography — line heights (Premia: unitless 1.2 for every size) */
  --font-lineHeight-2xl: 1.2; /* was 4rem */
  --font-lineHeight-2xs: 1.2; /* was 1.5rem */
  --font-lineHeight-3xl: 1.2; /* was 4.5rem */
  --font-lineHeight-3xs: 1.2; /* was 1.25rem */
  --font-lineHeight-4xl: 1.2; /* was 5rem */
  --font-lineHeight-4xs: 1.2; /* was 1rem */
  --font-lineHeight-5xl: 1.2; /* new pre token */
  --font-lineHeight-5xs: 1.2; /* was 0.75rem */
  --font-lineHeight-l: 1.2; /* was 3rem */
  --font-lineHeight-m: 1.2; /* was 2.5rem */
  --font-lineHeight-s: 1.2; /* was 2rem */
  --font-lineHeight-xl: 1.2; /* was 3.5rem */
  --font-lineHeight-xs: 1.2; /* was 1.75rem */

  /* typography — font sizes (Premia scale is one step larger for xs/2xs/3xs/4xs) */
  --font-size-2xl: 3.5rem;
  --font-size-2xs: 1.25rem; /* was 1rem */
  --font-size-3xl: 4rem;
  --font-size-3xs: 1rem; /* was 0.875rem */
  --font-size-4xl: 4.5rem;
  --font-size-4xs: 0.875rem; /* was 0.75rem */
  --font-size-5xl: 5rem; /* new pre token */
  --font-size-5xs: 0.75rem; /* new pre token */
  --font-size-6xs: 0.6rem; /* new pre token */
  --font-size-l: 2.5rem;
  --font-size-m: 2rem;
  --font-size-s: 1.75rem; /* was 1.5rem */
  --font-size-xl: 3rem;
  --font-size-xs: 1.5rem; /* was 1.25rem */

  /* font weights (Poppins caps at 700 — see reviewer note above) */
  --font-weight-black: 700; /* was 900 */
  --font-weight-bold: 500; /* was 700 */
  --font-weight-regular: 400;
  --font-weight-semibold: 500; /* was 600 */

  /* layout — screen breakpoints (carried over — brand-agnostic, not in pre tokens) */
  --layout-screen-large: 1024px;
  --layout-screen-medium: 768px;
  --layout-screen-small: 576px;
  --layout-screen-xLarge: 1200px;
  --layout-screen-xSmall: 390px; /* was 375px — audited in CWHM: no JS/TS in apps/autodm/src uses 375 as a numeric breakpoint constant */
  --layout-screen-xxLarge: 1440px;

  /* layout — z-index (Premia scale differs — see reviewer note above) */
  --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: 900; /* was 600 */
  --layout-z-modalBackdrop: 890; /* was 400 */
  --layout-z-offcanvas: 895; /* was 500 */
  --layout-z-popover: 910; /* was 700 */
  --layout-z-sticky: 200;
  --layout-z-tooltip: 920; /* was 800 */
  --layout-z-top: 999;

  /* motion */
  --motion-transition-easeInOut-long: 400ms ease-in-out;
  --motion-transition-easeInOut-medium: 300ms ease-in-out;
  --motion-transition-easeInOut-short: 200ms ease-in-out;

  /* space */
  --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;
}

/* ── 3. AutoDM app-specific overrides ──────────────────────────────────── */
/*
 * These variables have no equivalent in @guaranteed-rate/ui-tokens.
 * They are kept in a separate block so regenerating the token layer above
 * can never accidentally clobber them.
 *
 * Values that previously hardcoded Rate red (#d13239) now reference tokens
 * so they automatically track the Premia brand palette.
 */
:root {
  --shared-button-primary-border-radius: 12px;
  --shared-button-primary-font-color: #ffffff;
  --shared-button-primary-backgroundColor: var(--color-primary-brand-base);
  --shared-button-primary-hover-backgroundColor: var(
    --color-primary-brand-dark
  );
  --shared-button-primary-loader-color: #ffffff;
  --shared-button-secondary-border-radius: 12px;
  --shared-button-secondary-border-color: var(--color-primary-brand-base);
  --shared-button-secondary-border-width: 1px;
  --shared-button-secondary-font-color: var(--color-primary-brand-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-brand-dark);
  --shared-button-secondary-loader-color: var(--color-primary-brand-base);
  --shared-button-tertiary-loader-color: var(--color-secondary-action-base);
  --shared-button-quaternary-loader-color: var(--color-primary-body-base);

  /*
   * OPEN QUESTION — design team input needed:
   * --shared-gradient-1 was Rate red (linear-gradient(45deg, #c82f24, #e3673a)).
   * No Premia equivalent exists in the pre token set.
   * Using brand-blue gradient as placeholder; replace with confirmed values.
   */
  --shared-gradient-1: linear-gradient(45deg, #0e3b6d, #12487d);
  --shared-gradient-2: linear-gradient(45deg, #222222, #444444);

  --shared-mobile-header-height: 4.25rem;
  --shared-desktop-header-height: 4.25rem;
  /* Poppins has a larger x-height + Premia's unitless 1.2 line-heights make
     the floating label taller, causing it to collide with the selected value
     at the default 3.25rem. Bumping the input height gives the label enough
     room to float above the value on Select/Input triggers. */
  --shared-input-height: 3.5rem;
  --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);

  --skeletonLoader-defaultSkeleton-baseColor: #ebebeb;
  --skeletonLoader-defaultSkeleton-highlightColor: #f5f5f5;

  --apple-mobile-backscroll-taskbar-height: 9rem;
}

/*
 * ── 4. Premia-scoped component overrides ─────────────────────────────────
 *
 * @guaranteed-rate/react-components' Dropdown sets its value's
 * `line-height: var(--font-lineHeight-m)`. Every other brand ships that
 * token as `2.5rem` (tall line-box → glyph vertically centered below the
 * floated label). Premia's token is intentionally unitless `1.2`, which
 * collapses the line-box so the label overlaps the value.
 *
 * Restore an absolute `2.5rem` line-height on the Dropdown value.
 * `<input>` isn't affected: native form controls ignore CSS line-height
 * for control sizing, so TextInput lays out correctly already.
 *
 * Selector reuses the stable `div.dropdown` hook already used by
 * `apps/autodm/src/styles/global.css` (kept off the compiled hash class
 * `.s11bdbzb`, which can change on a library rebuild). No app code
 * renders a plain `<div class="dropdown">`, so the broader match is safe.
 * `!important` is required — the shipped rule
 * `.s11bdbzb div.dropdown { line-height: … }` outweighs plain
 * `div.dropdown` on specificity even though we load later.
 * Scope is Premia-only via this file being served by the Premia deployment.
 */
div.dropdown {
  line-height: 2.5rem !important;
}