/* OPENLANE reference tokens, copied 2026-10-15 from First Draft to QC Tool.
 * Scoped to Homepage 2026 main/header; never declared on :root.
 * Source files: colors.css, spacing.css, typography.css, radius.css.
 */

/* Figma source: Token Documentation — Color Styles (node 2846:357). */

:is(.ol-home-2026, body.page-template-template-homepage-2026 #header) {
  /* Primitive tokens */
  --color-primary-onward-blue: var(--openlane-onward-blue);
  --color-primary-openlane-blue: var(--openlane-blue);
  --color-primary-core-white: var(--openlane-core-white);



  --color-neutral-medium-silver: var(--openlane-medium-silver);

  --color-neutral-asphalt-black: var(--openlane-asphalt-black);









}

/*
 * Figma source: Openlane Size (node 2846:868) and OPENLANE Web Design Tokens
 * (node 2846:356), including Desktop LG, Desktop SM, Tablet, and Mobile modes.
 */

:is(.ol-home-2026, body.page-template-template-homepage-2026 #header) {
  /* Primitive tokens */
  --openlane-size-0: 0px;

  --openlane-size-2: 2px;
  --openlane-size-4: 4px;
  --openlane-size-6: 6px;
  --openlane-size-8: 8px;

  --openlane-size-12: 12px;
  --openlane-size-14: 14px;
  --openlane-size-16: 16px;
  --openlane-size-18: 18px;
  --openlane-size-20: 20px;
  --openlane-size-24: 24px;
  --openlane-size-28: 28px;
  --openlane-size-32: 32px;

  --openlane-size-40: 40px;

  --openlane-size-48: 48px;
  --openlane-size-56: 56px;
  --openlane-size-64: 64px;
  --openlane-size-72: 72px;
  --openlane-size-80: 80px;
  --openlane-size-96: 96px;








  --openlane-size-224: 224px;




  --openlane-size-360: 360px;
  --openlane-size-390: 390px;



  --openlane-size-600: 600px;


  --openlane-size-767: 767px;
  --openlane-size-780: 780px;
  --openlane-size-960: 960px;

  --openlane-size-1024: 1024px;
  --openlane-size-1280: 1280px;
  --openlane-size-1320: 1320px;
  --openlane-size-1440: 1440px;
  --openlane-size-9999: 9999px;




  /* Semantic tokens — Mobile */

  --gaps-xs: var(--openlane-size-4);
  --gaps-sm: var(--openlane-size-8);
  --gaps-md: var(--openlane-size-16);

  --gaps-xl: var(--openlane-size-32);



  --margin-md: var(--openlane-size-24);

  --margin-xl: var(--openlane-size-64);

  --padding-block-xs: var(--openlane-size-16);




  --padding-card-xs: var(--openlane-size-20);

  --padding-card-md: var(--openlane-size-32);







  /* Let mobile content fill the available width instead of capping it at 390px. */
  --layout-section-header: var(--openlane-size-600);
  --layout-container: var(--openlane-size-767);


  --button-padding-x-small: var(--openlane-size-20);
  --button-padding-y-small: var(--openlane-size-8);


  --button-padding-x-default: var(--openlane-size-32);
  --button-padding-y-default: var(--openlane-size-12);
  --button-padding-x-large: var(--openlane-size-40);
  --button-padding-y-large: var(--openlane-size-16);
  --button-font-size-small: var(--openlane-size-12);

  --button-font-size-default: var(--openlane-size-16);
  --button-font-size-large: var(--openlane-size-18);








}

/* Keep wider mobile gutters aligned with the 767px tablet layout. */
@media (min-width: 576px) and (max-width: 766px) {
  :is(.ol-home-2026, body.page-template-template-homepage-2026 #header) {
    --padding-block-xs: var(--openlane-size-20);
  }
}

@media (min-width: 767px) {
  :is(.ol-home-2026, body.page-template-template-homepage-2026 #header) {

    --margin-md: var(--openlane-size-32);

    --margin-xl: var(--openlane-size-72);

    --padding-block-xs: var(--openlane-size-20);




    --layout-section-header: var(--openlane-size-600);
    --layout-container: var(--openlane-size-767);
  }
}

@media (min-width: 1024px) {
  :is(.ol-home-2026, body.page-template-template-homepage-2026 #header) {
    --gaps-xs: var(--openlane-size-8);
    --gaps-sm: var(--openlane-size-12);
    --gaps-md: var(--openlane-size-20);

    --gaps-xl: var(--openlane-size-40);


    --margin-md: var(--openlane-size-40);
    --margin-xl: var(--openlane-size-80);

    --padding-card-xs: var(--openlane-size-24);

    --padding-card-md: var(--openlane-size-40);






    --layout-section-header: var(--openlane-size-780);
    --layout-container: var(--openlane-size-1280);
  }
}

@media (min-width: 1440px) {
  :is(.ol-home-2026, body.page-template-template-homepage-2026 #header) {


    --margin-md: var(--openlane-size-48);

    --margin-xl: var(--openlane-size-96);

    --layout-container: var(--openlane-size-1320);
  }
}

/* Figma source: Token Documentation — Typography (node 2846:453). */

:is(.ol-home-2026, body.page-template-template-homepage-2026 #header) {
  /* Primitive tokens — Figma Typography collection */
  --typography-h1-xl: 56px;
  --typography-h1: 48px;
  --typography-h1-sm: 48px;
  --typography-h2: 32px;
  --typography-h3: 32px;
  --typography-h4: 20px;
  --typography-h5: 18px;
  --typography-body-xl: 18px;
  --typography-body-large: 18px;
  --typography-body-default: var(--Font-Body);
  --typography-label: var(--Font-Label);
  --typography-caption-footnote: var(--Font-Caption-Footnote);

  /* Supporting primitive extracted from the approved Figma text styles. */
  --font-family-poppins: Poppins, sans-serif;

  /* Semantic tokens — Figma Openlane Web collection */



  --openlane-web-h1-sm: 600 var(--typography-h1-sm) / 1 Poppins, sans-serif;
  --openlane-web-h1-sm-letter-spacing: -3px;

  --openlane-web-h2: 600 var(--typography-h2) / 1.1 Poppins, sans-serif;
  --openlane-web-h2-letter-spacing: -1px;

  --openlane-web-h3: 600 var(--typography-h3) / 1.1 Poppins, sans-serif;
  --openlane-web-h3-letter-spacing: -1px;

  --openlane-web-h4: 600 var(--typography-h4) / 1.2 Poppins, sans-serif;
  --openlane-web-h4-letter-spacing: -1px;


  --openlane-web-body-xl:
    400 var(--typography-body-xl) / 1.5 Poppins, sans-serif;
  --openlane-web-body-xl-letter-spacing: 0px;

  --openlane-web-body-lg:
    400 var(--typography-body-large) / 1.75 Poppins, sans-serif;
  --openlane-web-body-lg-letter-spacing: 0px;


  --openlane-web-label: 400 var(--typography-label) / 1.75 Poppins, sans-serif;


}

@media (min-width: 767px) {
  :is(.ol-home-2026, body.page-template-template-homepage-2026 #header) {
    --typography-h1-xl: 72px;
    --typography-h1: 64px;
    --typography-h1-sm: 56px;
    --typography-h2: 40px;
  }
}

@media (min-width: 1024px) {
  :is(.ol-home-2026, body.page-template-template-homepage-2026 #header) {
    --typography-h1-xl: 96px;
    --typography-h1: 80px;
    --typography-h1-sm: 72px;
    --typography-h2: 48px;
    --typography-h3: 40px;
    --typography-h4: 24px;
    --typography-h5: 20px;
    --typography-body-xl: 20px;
    --typography-body-large: 20px;
  }
}

@media (min-width: 1440px) {
  :is(.ol-home-2026, body.page-template-template-homepage-2026 #header) {
    --typography-h1-xl: 120px;
    --typography-h1: 96px;
    --typography-h2: 56px;
    --typography-h3: 48px;
    --typography-body-xl: 24px;
  }
}

/* Figma source: Border Radius (node 3000:981). */

:is(.ol-home-2026, body.page-template-template-homepage-2026 #header) {
  /* Primitive tokens are defined in spacing.css as Openlane Size values. */

  /* Semantic tokens — Mobile */



  --radius-rounded-2xl: var(--openlane-size-12);
  --radius-rounded-3xl: var(--openlane-size-20);
  --radius-rounded-full: var(--openlane-size-9999);
}

@media (min-width: 1024px) {
  :is(.ol-home-2026, body.page-template-template-homepage-2026 #header) {


    --radius-rounded-2xl: var(--openlane-size-16);
    --radius-rounded-3xl: var(--openlane-size-24);
  }
}

/* Shared template defaults; component rules live in their block CSS. */
#main.ol-home-2026 {
  --page-gutter: var(--padding-block-xs);
  --button-state-border-width: 3px;
  font-family: var(--font-family-poppins);
}

#main.ol-home-2026 {
  --button-focus-background: var(--color-primary-onward-blue);
  --button-focus-color: var(--color-primary-core-white);
  --button-focus-shadow: inset 0 0 0 var(--button-state-border-width) var(--color-primary-openlane-blue), 0 0 2px rgb(0 0 0 / 25%);
}

#main.ol-home-2026 .ol-cta--tertiary-dark {
  display: inline-flex;
  align-items: center;
  gap: var(--gaps-sm);
  padding: 0;
  font: 600 var(--button-font-size-large) / 24px var(--font-family-poppins);
  color: var(--color-primary-core-white);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

#main.ol-home-2026 .ol-cta--tertiary-dark:hover {
  border-bottom-color: var(--color-primary-openlane-blue);
}

#main.ol-home-2026 .ol-cta--tertiary-dark:is(:focus-visible, :active) {
  color: var(--color-primary-core-white);
  border-bottom-color: var(--color-primary-core-white);
}

#main.ol-home-2026 .ol-cta--tertiary-dark:focus-visible {
  outline: 2px solid var(--color-primary-core-white);
  outline-offset: 4px;
}