/*
 * Origin Point (op) Theme
 *
 * Token source: @guaranteed-rate/ui-tokens op (Origin Point) token set
 *   — Sourced from packages/tokens/src/op/tokens.json in Guaranteed-Rate/ui
 *     (W3C DTCG format). Engineering z-index overrides from
 *     packages/tokens/scripts/figma.config.ts are applied.
 * Theme source: @guaranteed-rate/ui-themes op
 *
 * 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="op"` to <html> and scope the overrides accordingly.
 *
 * ── Sections ──────────────────────────────────────────────────────────────
 * 1. Proxima Nova @font-face declarations (CloudFront CDN)
 *    Origin Point uses Proxima Nova (same as gri/Rate) — confirmed via
 *    font.family.* in packages/tokens/src/op/tokens.json. The five @font-face
 *    blocks below are retained unchanged.
 * 2. Origin Point tokens
 * 3. AutoDM app-specific overrides (--shared-*, --skeletonLoader-*, --apple-*)
 

/* ── 1. Proxima Nova @font-face ────────────────────────────────────────── */
@font-face {
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: 400;
  src:
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_regular.ttf")
      format("truetype"),
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_regular.woff")
      format("woff"),
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_regular.woff2")
      format("woff2"),
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_regular.eot")
      format("embedded-opentype");
  font-display: fallback;
}

@font-face {
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: 600;
  src:
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_semibold.ttf")
      format("truetype"),
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_semibold.woff")
      format("woff"),
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_semibold.woff2")
      format("woff2"),
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_semibold.eot")
      format("embedded-opentype");
  font-display: fallback;
}

@font-face {
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: 700;
  src:
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_bold.ttf")
      format("truetype"),
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_bold.woff")
      format("woff"),
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_bold.woff2")
      format("woff2"),
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_bold.eot")
      format("embedded-opentype");
  font-display: fallback;
}

@font-face {
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: 900;
  src:
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima-nova-black.ttf")
      format("truetype"),
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima-nova-black.woff")
      format("woff"),
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima-nova-black.woff2")
      format("woff2"),
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima-nova-black.eot")
      format("embedded-opentype");
  font-display: fallback;
}

@font-face {
  font-family: "Proxima Nova Condensed";
  font-style: normal;
  font-weight: 400;
  src:
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_condensed_regular.ttf")
      format("truetype"),
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_condensed_regular.woff")
      format("woff"),
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_condensed_regular.woff2")
      format("woff2"),
    url("https://d2fcchof1bpxmv.cloudfront.net/cms/fonts/proxima_nova_condensed_regular.eot")
      format("embedded-opentype");
  font-display: fallback;
}

/* ── 2. Origin Point tokens ────────────────────────────────────────────── */
:root {
  /* border-radius */
  --border-radius-circle: 50%;
  --border-radius-heavy: 9999px;
  --border-radius-light: 4px;
  --border-radius-medium: 12px;
  --border-radius-square: 0;
  /* op token values from packages/tokens/src/op/tokens.json */
  --border-radius-button: 9999px;
  --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 — sourced from packages/tokens/src/op/tokens.json */
  --color-credit-excellent: #106a88;
  --color-credit-fair: #facf4e;
  --color-credit-good: #0064e5;
  --color-credit-poor: #c72f2f;

  /* data — sourced from packages/tokens/src/op/tokens.json */
  --color-data-1: #0064e5;
  --color-data-2: #106a88;
  --color-data-3: #de5a3e;
  --color-data-4: #facf4e;
  --color-data-5: #d5c5a8;

  /* marketing — color.marketing.* resolved from op tokens.json; */
  --color-marketing-1-base: #ac8c51;
  --color-marketing-1-dark: #886b3a;
  --color-marketing-1-light: #d5c5a8;
  --color-marketing-1-lighter: #f3eee5;
  --color-marketing-2-base: #f1694c;
  --color-marketing-2-dark: #be3d26;
  --color-marketing-2-light: #f8b4a5;
  --color-marketing-2-lighter: #fde9e4;
  --color-marketing-3-base: #53a8a0;
  --color-marketing-3-dark: #459990;
  --color-marketing-3-light: #a9d3cf;
  --color-marketing-3-lighter: #e5f2f1;
  --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;
  --color-marketing-6-dark: #106a88;
  --color-marketing-6-light: #c5dfe8;
  --color-marketing-6-lighter: #dcecf1;
  --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;
  --color-marketing-8-dark: #216745;
  --color-marketing-8-light: #94bba9;
  --color-marketing-8-lighter: #dfebe5;

  /* primary brand  */
  --color-primary-body-base: #25282a;
  --color-primary-body-dark: #101213;
  --color-primary-brand-base: #0064e5;
  --color-primary-brand-dark: #0049a8;
  --color-primary-brand-lightest: #e5f1ff;

  /* secondary action  */
  --color-secondary-action-2-base: #0064e5;
  --color-secondary-action-2-dark: #0049a8;
  --color-secondary-action-2-light: #a8ceff;
  --color-secondary-action-2-lighter: #d1e5ff;
  --color-secondary-action-2-lightest: #e5f1ff;
  --color-secondary-action-base: #0064e5;
  --color-secondary-action-dark: #0049a8;
  --color-secondary-action-hover: #f2f7fe;
  --color-secondary-action-light: #a8ceff;
  --color-secondary-action-lighter: #d1e5ff;
  --color-secondary-action-lightest: #e5f1ff;

  /* secondary inactive */
  --color-secondary-inactive-base: #5e6265;
  --color-secondary-inactive-light: #c7c9ca;
  --color-secondary-inactive-lighter: #dedfe0;
  --color-secondary-inactive-lightest: #f2f2f2;
  --color-secondary-inactive-medium: #797d7f;

  /* secondary input */
  --color-secondary-input-base: #0064e5;
  --color-secondary-input-dark: #0049a8;
  --color-secondary-input-light: #9fc5f5;
  --color-secondary-input-lighter: #d1e5ff;
  --color-secondary-input-lightest: #e5f1ff;
  --color-secondary-input-medium: #70aeff;
  --color-secondary-white: #ffffff;

  /* status  */
  --color-status-critical-base: #c72f2f;
  --color-status-critical-dark: #9f0629;
  --color-status-critical-lighter: #f2cccf;
  --color-status-critical-lightest: #f8e3e4;
  --color-status-info-base: #0064e5;
  --color-status-info-dark: #0049a8;
  --color-status-info-lightest: #e5f1ff;
  --color-status-ok-base: #106a88;
  --color-status-ok-dark: #0c5066;
  --color-status-ok-lightest: #e7f2f5;
  --color-status-warning-base: #facf4e;
  --color-status-warning-dark: #bb9b3a;
  --color-status-warning-lightest: #fffaed;

  /* effects overlay */
  --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 — confirmed Proxima Nova via font.family.* in op tokens.json */
  --font-family-compliance: Proxima Nova Condensed, sans-serif;
  --font-family-headline: Proxima Nova, sans-serif;
  --font-family-primary: Proxima Nova, sans-serif;

  /* typography — font sizes */
  --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: 1.25rem;
  --font-size-3xl: 4rem;
  --font-size-3xs: 1rem;
  --font-size-4xl: 4.5rem;
  --font-size-4xs: 0.875rem;
  --font-size-l: 2.5rem;
  --font-size-m: 2rem;
  --font-size-s: 1.75rem;
  --font-size-xl: 3rem;
  --font-size-xs: 1.5rem;

  /* 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: 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: 900; /* engineering override: packages/tokens/scripts/figma.config.ts */
  --layout-z-modalBackdrop: 890; /* engineering override: packages/tokens/scripts/figma.config.ts */
  --layout-z-offcanvas: 895; /* engineering override: packages/tokens/scripts/figma.config.ts */
  --layout-z-popover: 910; /* engineering override: packages/tokens/scripts/figma.config.ts */
  --layout-z-sticky: 200;
  --layout-z-tooltip: 920; /* engineering override: packages/tokens/scripts/figma.config.ts */
  --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 Origin Point brand
 */
: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);

  --shared-gradient-1: linear-gradient(45deg, #c82f24, #e3673a);
  --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;
}