/*
 * Brief 48a: "Steel and river slate" type and colour test drive.
 *
 * Linked only when src/lib/theme/theme-v2.ts says the request host is in
 * THEME_V2_HOSTS (today: the Preview host). Every rule is scoped to
 * <html data-theme="v2">, so this file changes nothing anywhere else.
 * Type and colour only: no wording, layout, picture, form, CRM or tracking rules.
 *
 * Change the typeface or any colour by editing one token in the first block.
 * Hanken Grotesk is self-hosted under /fonts/hanken-grotesk/ (SIL OFL 1.1,
 * licence in /fonts/hanken-grotesk/OFL.txt).
 */

/* Hanken Grotesk: 400 text, 500 headings, 600 labels and buttons. */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/hanken-grotesk/hanken-grotesk-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/hanken-grotesk/hanken-grotesk-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/hanken-grotesk/hanken-grotesk-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/hanken-grotesk/hanken-grotesk-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/hanken-grotesk/hanken-grotesk-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/hanken-grotesk/hanken-grotesk-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* 1. Tokens. One value per typeface or colour. */
:root:root[data-theme="v2"] {
  --v2-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --v2-page: #FFFFFF;
  --v2-neutral-band: #E6E8E9;
  --v2-ink: #1C1F22;
  --v2-ink-muted: #52575B;
  --v2-dark-band: #1C1F22;
  --v2-accent: #34556A;
  --v2-accent-hover: #2A4657;
  --v2-hairline: #D3D7D9;
  --v2-on-dark: #F3F4F5;
  --v2-on-dark-muted: #B9C0C4;
  --v2-on-dark-button: #FFFFFF;
  --v2-dark-rule: #52575B;

  /* Typeface (replaces Poppins and the system label/button stack). */
  --font-heading: var(--v2-font);
  --font-body: var(--v2-font);
  --font-display: var(--v2-font);
  --font-eyebrow: var(--v2-font);
  --font-button: var(--v2-font);
  --ploy-font-display: var(--v2-font);
  --ploy-font-heading: var(--v2-font);
  --ploy-font-body: var(--v2-font);
  --font-heading-weight: 500;
  --font-heading-bold-weight: 500;
  --font-body-weight: 400;
  --font-body-bold-weight: 500;
  --font-button-weight: 600;
  --font-body-line-height: 1.6;

  /* Page and neutral band (every #B8CBD0 band, tinted panel and picture placeholder). */
  --ploy-neutral-primary: var(--v2-page);
  --ploy-neutral-primary-s1: var(--v2-page);
  --ploy-neutral-light: var(--v2-page);
  --ploy-neutral-secondary: var(--v2-neutral-band);
  --ploy-neutral-primary-s2: var(--v2-neutral-band);
  --ploy-neutral-primary-s3: var(--v2-neutral-band);
  --ploy-neutral-primary-s4: var(--v2-neutral-band);
  --ploy-neutral-primary-s5: var(--v2-neutral-band);

  /* Ink and dark band (replaces black and near-black). */
  --ploy-neutral-dark: var(--v2-ink);
  --ploy-neutral-inverse: var(--v2-dark-band);
  --ploy-neutral-inverse-s1: var(--v2-dark-band);
  --ploy-accent-primary: var(--v2-dark-band);
  --ploy-accent-secondary: var(--v2-dark-band);
  --ploy-text-primary: var(--v2-ink);
  --ploy-text-secondary: var(--v2-ink-muted);
  --ploy-text-inverse: var(--v2-on-dark);
  --ploy-text-inverse-secondary: var(--v2-on-dark-muted);
  --ploy-text-on-accent-tertiary: var(--v2-ink);
  --ploy-input-border: var(--v2-ink);
  --ploy-choice-checked-background: var(--v2-ink);
  --ploy-choice-checked-border: var(--v2-ink);
  --destructive: var(--v2-ink);

  /* Hairline borders and rules. */
  --ploy-border-primary: var(--v2-hairline);

  /* Buttons: primary solid accent, secondary outlined ink. */
  --ploy-button-primary-background: var(--v2-accent);
  --ploy-button-primary-text: #FFFFFF;
  --ploy-button-primary-border: var(--v2-accent);
  --ploy-button-secondary-background: var(--v2-page);
  --ploy-button-secondary-text: var(--v2-ink);
  --ploy-button-secondary-border: var(--v2-ink);

  /* Reading-role variables used by readability.css. */
  --action-ink: var(--v2-ink);
  --action-fill: var(--v2-accent);
  --action-fill-hover: var(--v2-accent-hover);
  --action-on-fill: #FFFFFF;
  --v2-focus: var(--v2-accent);
  --v2-link-hover: var(--v2-accent);
}

/* 2. Surfaces. Light surfaces use ink and the accent; dark bands use light text. */
:root[data-theme="v2"] :is([class*="bg-ploy-background-secondary"], [class*="bg-ploy-neutral-secondary"], .careers-role-group--tinted, .careers-other),
:root[data-theme="v2"] :is([class*="bg-ploy-background-primary"], [class*="bg-ploy-neutral-primary"], .careers-role-card) {
  --ploy-text-secondary: var(--v2-ink-muted);
}
:root[data-theme="v2"] :is([class*="bg-ploy-background-inverse"], [class*="bg-ploy-background-accent-primary"], [class*="bg-ploy-accent-primary"], [class*="bg-ploy-neutral-inverse"], .careers-hero, .careers-band--dark, .careers-job-introduction, .careers-job-values, .careers-top-photograph) {
  --ploy-text-secondary: var(--v2-on-dark-muted);
  --action-ink: var(--v2-on-dark);
  --action-fill: var(--v2-on-dark-button);
  --action-fill-hover: var(--v2-neutral-band);
  --action-on-fill: var(--v2-ink);
  --v2-focus: var(--v2-on-dark);
  --v2-link-hover: var(--v2-on-dark);
}
:root[data-theme="v2"] :is([class*="bg-ploy-background-primary"], [class*="bg-ploy-background-secondary"], [class*="bg-ploy-neutral-primary"], .careers-other, .careers-role-card, .careers-mobile-apply) {
  --action-ink: var(--v2-ink);
  --action-fill: var(--v2-accent);
  --action-fill-hover: var(--v2-accent-hover);
  --action-on-fill: #FFFFFF;
  --v2-focus: var(--v2-accent);
  --v2-link-hover: var(--v2-accent);
}

/* Footer becomes the dark band. The footer pattern stays, under an ink veil. */
:root[data-theme="v2"] .site-footer.site-footer {
  background-color: var(--v2-dark-band);
  background-image: linear-gradient(rgba(28, 31, 34, .94), rgba(28, 31, 34, .94)), url("https://cdn.ploy.ai/76f4e6a0-c269-4625-82c8-79ef3e2eb8b5/user/dc81535d-slurp-footer-design.webp") !important;
  color: var(--v2-on-dark);
  --ploy-text-primary: var(--v2-on-dark);
  --ploy-text-secondary: var(--v2-on-dark-muted);
  --ploy-border-primary: var(--v2-dark-rule);
  --action-ink: var(--v2-on-dark);
  --action-fill: var(--v2-on-dark-button);
  --action-fill-hover: var(--v2-neutral-band);
  --action-on-fill: var(--v2-ink);
  --v2-focus: var(--v2-on-dark);
  --v2-link-hover: var(--v2-on-dark);
}
:root[data-theme="v2"] .site-footer.site-footer :is(input, select, textarea) {
  --ploy-text-primary: var(--v2-ink);
  color: var(--v2-ink);
}

/* Builder: the selected option border, progress step and choice marks use the accent. */
:root[data-theme="v2"] .home-configurator {
  --ploy-accent-primary: var(--v2-accent);
  --ploy-choice-checked-background: var(--v2-accent);
  --ploy-choice-checked-border: var(--v2-accent);
}

/* 3. Type. */
:root[data-theme="v2"] body {
  font-family: var(--v2-font);
  font-weight: 400;
  line-height: 1.6;
  color: var(--v2-ink);
  background-color: var(--v2-page);
  font-variant-numeric: tabular-nums; /* prices and figures */
}
:root[data-theme="v2"] :is(input, select, textarea, button) { font-family: inherit; }

/* Headings and emphasis 500; nothing heavier than 600 anywhere. */
:root[data-theme="v2"] :is(h1, h2, h3, h4, h5, h6, [data-ploy-component="heading"], [data-ploy-component="displayHeading"], strong, b, th, dt, .font-bold, .font-semibold, .font-extrabold, .font-black, .choose-your-path__title, .path-strip__name, .careers-band__number, .careers-role-card__pay, .careers-ladder__number, .careers-training__number) {
  font-weight: 500;
}

/* Strip or split-row heading (today's 36px level): 24px phone, 28px desktop. */
:root[data-theme="v2"] :is([class*="md:text-[2.25rem]"], [class*="md:text-[36px]"], .group-heading) {
  font-size: 24px;
  font-weight: 500;
}

/* Section heading (today's 64px level): 32px phone, 44px desktop. */
:root[data-theme="v2"] :is([class*="md:text-[4rem]"], [class*="lg:text-[64px]"], .careers-band__title) {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* H1: 40px phone, 64px desktop. */
:root[data-theme="v2"] :is(h1, h1[class]) {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  :root[data-theme="v2"] :is([class*="md:text-[2.25rem]"], [class*="md:text-[36px]"], .group-heading) { font-size: 28px; }
  :root[data-theme="v2"] :is([class*="md:text-[4rem]"], [class*="lg:text-[64px]"], .careers-band__title) { font-size: 44px; }
  :root[data-theme="v2"] :is(h1, h1[class]) { font-size: 64px; }
}

/* Small uppercase labels: today's size, weight 600, 0.08em tracking. */
:root[data-theme="v2"] :is(.uppercase, .readability-label, .about-story [class~="uppercase"], .catalog-model__tag, .custom-projects__tag, .editorial-rows__tag, .careers-eyebrow, .careers-role-group__count, .careers-benefits__label, .careers-ladder__group, .careers-track__groups, .path-strip__label, .hero__eyebrow) {
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Buttons: 600. */
:root[data-theme="v2"] [data-ploy-component="button"],
:root[data-theme="v2"] :where(main, .site-footer) button:not([data-ploy-component="button"]):not([role="combobox"]) {
  font-weight: 600;
}

/* 4. Buttons and interaction colour. */
:root[data-theme="v2"] [data-ploy-component="button"][data-button-tone="light"] {
  --action-ink: var(--v2-on-dark);
  --action-fill: var(--v2-on-dark-button);
  --action-fill-hover: var(--v2-neutral-band);
  --action-on-fill: var(--v2-ink);
  --v2-focus: var(--v2-on-dark);
}
:root[data-theme="v2"] [data-ploy-component="button"][data-button-tone="dark"] {
  --action-ink: var(--v2-ink);
  --action-fill: var(--v2-accent);
  --action-fill-hover: var(--v2-accent-hover);
  --action-on-fill: #FFFFFF;
  --v2-focus: var(--v2-accent);
}
:root[data-theme="v2"] [data-ploy-component="button"][data-button-variant="primary"]:hover {
  background-color: var(--action-fill-hover);
  border-color: var(--action-fill-hover);
  opacity: 1;
}
:root[data-theme="v2"] :focus-visible { outline-color: var(--v2-focus); }
:root[data-theme="v2"] [data-ploy-component="button"]:focus-visible { outline: 2px solid var(--v2-focus); outline-offset: 4px; }
:root[data-theme="v2"] .choose-your-path__door:focus-visible { outline-color: var(--v2-focus); }

/* Text links take the accent on hover (light surfaces); dark bands keep light text. */
:root[data-theme="v2"] :is(p, li, dd, address, figcaption, td, small) > a:not([data-ploy-component="button"]):hover,
:root[data-theme="v2"] a.underline:not([data-ploy-component="button"]):hover,
:root[data-theme="v2"] [data-ploy-component="navbar"] a:not([data-ploy-component="button"]):hover {
  color: var(--v2-link-hover);
}

/* 5. Hard-coded colours outside the tokens. */
:root[data-theme="v2"] .text-\[\#5a5a5a\],
:root[data-theme="v2"] .choose-your-path__description,
:root[data-theme="v2"] .careers .careers-role-group__header > p,
:root[data-theme="v2"] .careers .careers-role-group--tinted .careers-role-group__header > p {
  color: var(--v2-ink-muted);
}
:root[data-theme="v2"] :is(.careers-hero, .careers-band--dark, .careers-job-introduction, .careers-job-values) {
  background: var(--v2-dark-band);
  color: var(--v2-on-dark);
}
:root[data-theme="v2"] .careers-top-photograph.bg-black { background-color: var(--v2-dark-band); }
:root[data-theme="v2"] .careers .careers-outline { color: var(--v2-on-dark); border-color: var(--v2-on-dark); }
:root[data-theme="v2"] .careers .careers-outline:hover { color: var(--v2-ink); background: var(--v2-on-dark-button); }
:root[data-theme="v2"] :is(.careers-value p, .careers-track__step > p, .careers-training p, .careers-form__help, .careers-application-closing) { color: var(--v2-on-dark-muted); }
:root[data-theme="v2"] :is(.careers-band__end, .careers-role-card__link, .careers-job-section) { border-color: var(--v2-hairline); }
:root[data-theme="v2"] .careers-band--dark .careers-band__end { border-color: #454545; }
:root[data-theme="v2"] .careers-role-card { border-color: var(--v2-hairline); border-top-color: var(--career-ink); }
:root[data-theme="v2"] .careers-benefits li { border-bottom-color: var(--v2-hairline); }
:root[data-theme="v2"] :is(.careers-form select, .careers-form textarea, .careers-form input, .careers-form input[type=file]) { border-color: var(--v2-hairline); }
:root[data-theme="v2"] .careers-ladder__step { background: var(--v2-neutral-band); }
:root[data-theme="v2"] .careers-track__marker { background: var(--v2-dark-band); }
:root[data-theme="v2"] .careers-track__bonus { color: var(--v2-ink); border-color: var(--v2-ink); }

/* Form submits are forward actions: solid primary (white with ink text on dark bands). */
:root[data-theme="v2"] form button[type="submit"][data-ploy-component="button"] {
  background-color: var(--action-fill);
  border: 1px solid var(--action-fill);
  color: var(--action-on-fill);
}
:root[data-theme="v2"] form button[type="submit"][data-ploy-component="button"]:is(:hover, :focus-visible) {
  background-color: var(--action-fill-hover);
  border-color: var(--action-fill-hover);
  color: var(--action-on-fill);
  opacity: 1;
}