/*
 * Citywide (cwhm) Theme
 *
 * Token source: @guaranteed-rate/ui-tokens cit (Citywide) v0.3.x
 * Theme source: @guaranteed-rate/ui-themes cwhm 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="cwhm"` to <html> and scope the overrides accordingly.
 *
 * ── Sections ──────────────────────────────────────────────────────────────
 * 1. Google Fonts (Plus Jakarta Sans, EB Garamond)
 *    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 Citywide deployments.
 * 2. Citywide tokens (sourced from cit token JSON)
 * 3. AutoDM app-specific overrides (--shared-*, --skeletonLoader-*, --apple-*)
 *
 * ── Unverified token groups ───────────────────────────────────────────────
 * The following groups were NOT verified against the full cit token source
 * before this pilot. Values are carried over from the previous (gri) file and
 * should be audited and updated once the full Color.cit.json is available:
 *   --color-status-*
 *   --color-secondary-inactive-*
 *   --color-secondary-input-*
 *   --font-size-*
 *   --font-lineHeight-*
 *   --font-letter-spacing-* (net-new in cit — values intentionally omitted
 *     pending verification; add once confirmed)
 *
 * ── Open question ─────────────────────────────────────────────────────────
 * --shared-gradient-1 was Rate red (linear-gradient(45deg, #c82f24, #e3673a))
 * and has no token equivalent for Citywide. A placeholder gradient using the
 * Citywide brand brown is used below; the design team must confirm the correct
 * Citywide gradient values before go-live.
 */

/* ── 1. Google Fonts ───────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;0,900;1,400&display=swap");

/* ── 2. Citywide 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 cit tokens */
  --border-radius-button: 9999px;
  --border-radius-strong: 16px;
  --border-radius-stronger: 24px;

  /* 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: #58524c; /* was #2175da */
  --color-data-2: #8e6d5a; /* was #54ba83 */
  --color-data-3: #164464; /* was #de5a3e */
  --color-data-4: #7997ad; /* was #ffbe16 */
  --color-data-5: #cbcdc5; /* was #d5c5a8 */

  /* marketing (sets 1, 3–8 unchanged from gri baseline; set 2 updated) */
  --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; /* 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: #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;

  /* primary brand (Citywide brown) */
  --color-primary-body-base: #1c1a24; /* was #25282a */
  --color-primary-body-dark: #001e2d; /* was #101213 */
  --color-primary-body-light: #575552; /* new cit token */
  --color-primary-brand-base: #8e6d5a; /* was #d13239 */
  --color-primary-brand-dark: #7e5e4c; /* was #a12026 */
  --color-primary-brand-lightest: #f4f1ef; /* was #faeaeb */
  --color-primary-logo: #8e6d5a; /* new cit token */

  /* secondary action (brown replaces blue) */
  --color-secondary-action-2-base: #0c5879; /* was #ba9d69 */
  --color-secondary-action-2-dark: #094a69; /* was #856a3e */
  --color-secondary-action-2-light: #85abbc; /* was #eee6d9 */
  --color-secondary-action-2-lighter: #c2d5de; /* was #f5f1e9 */
  --color-secondary-action-2-lightest: #e7eef2; /* was #f8f5f0 */
  --color-secondary-action-base: #8e6d5a; /* was #2175da */
  --color-secondary-action-dark: #7e5e4c; /* was #1355ca */
  --color-secondary-action-hover: #f9f8f7; /* was #f4f8fd */
  --color-secondary-action-light: #c6b6ac; /* was #c7dcf6 */
  --color-secondary-action-lighter: #e2dad5; /* was #deeaf9 */
  --color-secondary-action-lightest: #f4f1ef; /* was #eef4fc */

  /* secondary inactive — UNVERIFIED: carried over from gri; audit against Color.cit.json */
  --color-secondary-inactive-base: #636363;
  --color-secondary-inactive-light: #b1b1b1;
  --color-secondary-inactive-lighter: #d8d8d8;
  --color-secondary-inactive-lightest: #f3f3f3;
  --color-secondary-inactive-medium: #8a8a8a;

  /* secondary input — UNVERIFIED: carried over from gri; audit against Color.cit.json */
  --color-secondary-input-base: #2175da;
  --color-secondary-input-lighter: #deeaf9;
  --color-secondary-input-lightest: #eef4fc;
  --color-secondary-input-medium: #90baec;
  --color-secondary-white: #ffffff;

  /* status — UNVERIFIED: carried over from gri; audit against Color.cit.json */
  --color-status-critical-base: #c12950;
  --color-status-critical-dark: #9f1f40;
  --color-status-critical-lighter: #efc9d3;
  --color-status-critical-lightest: #f8e9ed;
  --color-status-info-base: #2175da;
  --color-status-info-dark: #1355ca;
  --color-status-info-lightest: #eef4fc;
  --color-status-ok-base: #54ba83;
  --color-status-ok-dark: #327c53;
  --color-status-ok-lightest: #eef8f2;
  --color-status-warning-base: #ffbe16;
  --color-status-warning-dark: #9f6400;
  --color-status-warning-lightest: #fff5dc;

  /* new cit token */
  --color-effects-overlay: #00000026;

  /* effects */
  --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 */
  --font-family-compliance: Plus Jakarta Sans, sans-serif; /* was Proxima Nova Condensed — Citywide has no condensed face */
  --font-family-headline: EB Garamond, serif; /* was Proxima Nova — NOTE: serif replacement for sans-serif */
  --font-family-primary: Plus Jakarta Sans, sans-serif; /* was Proxima Nova */

  /* typography — font sizes — UNVERIFIED: carried over from gri; audit against cit tokens */
  --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 weights */
  --font-weight-black: 900;
  --font-weight-bold: 700;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  /* layout */
  --layout-screen-large: 1024px;
  --layout-screen-medium: 768px;
  --layout-screen-small: 576px;
  --layout-screen-xLarge: 1200px;
  --layout-screen-xSmall: 390px; /* was 375px — audited: no JS/TS in apps/autodm/src uses 375 as a numeric breakpoint constant */
  --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 */
  --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 Citywide 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 Citywide equivalent exists in the cit token set.
   * Using brand-brown gradient as placeholder; replace with confirmed values.
   */
  --shared-gradient-1: linear-gradient(45deg, #7e5e4c, #8e6d5a);
  --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: rgba(0, 0, 0, 0.15);

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

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