/*
 * Brand token layer.
 *
 * Two layers, deliberately separated so this library can be re-skinned for
 * another project by editing only the first one:
 *
 *   1. BRAND PRIMITIVES — raw palette, fonts, and type scale. Values come from
 *      the designer's Figma variables (file Z5x0NcpHaFf2CDyMn7riHn). The
 *      designer's own token names are kept as comments so the two stay
 *      traceable to each other.
 *   2. THEME BRIDGE — maps those primitives onto the custom properties the
 *      vendored Frisk stylesheet already consumes. Nothing below layer 2
 *      should reference a raw hex.
 *
 * To rebrand: replace layer 1 and leave layer 2 alone.
 *
 * Load order matters: this file lives beside the vendored theme stylesheets
 * (rather than in app/, where Next injects it *before* them) and is linked
 * last in THEME_STYLES. Most of what it overrides — `:root` tokens, `.btn`,
 * `.link-btn` — ties with style.css on specificity, so it only wins by
 * coming later. Keep it at the end of that array.
 */

:root {
  /* ==================================================================
   * 1. BRAND PRIMITIVES
   * ================================================================== */

  /* --- Palette (Figma variable names in comments) --- */
  --brand-gunmetal: #072b31; /* Gunmetal   — primary dark teal */
  --brand-refresh: #ffb25b; /* Refresh    — amber accent */
  --brand-flagstone: #689881; /* Flagstone  — sage green */
  /* Flagstone is 3.28:1 on white — fine for fills and large type, short of
     WCAG AA (4.5:1) for body-size text. This darkened variant keeps the sage
     identity and measures 4.88:1, for small text set in the brand green. */
  --brand-flagstone-ink: #4f7a64;
  --brand-ignition: #9d432c; /* Ignition   — rust */
  --brand-black-coffee: #382f2d; /* Black Coffee — warm near-black */
  --brand-clay: #b7a99a; /* Clay       — warm neutral */
  --brand-white: #ffffff;

  /* Sampled from the Visit page's Youth cards (Figma 291:654). Unlike the
   * five above these are NOT bound to Figma variables — the designer picked
   * them per-card — so they are the first candidates to re-check if the
   * palette is ever formalised. Only the third card uses a real token
   * (Refresh); these two fill the gap. */
  --brand-mint: #aed9b2; /* Youth card 1 */
  --brand-coral: #ef7377; /* Youth card 3 */

  /* --- Surfaces ---
   * Sampled from the homepage comps; not bound to Figma variables there, so
   * these are the values to re-check if the designer tokenizes them later. */
  --brand-surface-dark: var(--brand-gunmetal); /* hero, footer, app section */
  --brand-surface-dark-alt: #0b4d58; /* Current Series band (lighter teal) */
  --brand-surface-light: #fcfaf9; /* near-white, subtly warm */
  --brand-surface-muted: #f2eee9; /* warm off-white (Testimonials) */
  --brand-border: #e3ded7;

  /* --- Ink --- */
  --brand-ink: var(--brand-gunmetal); /* headings + body on light */
  --brand-ink-warm: var(--brand-black-coffee); /* warm-toned sections */
  --brand-ink-inverse: var(--brand-white); /* on dark surfaces */

  /* --- Font families --- */
  --brand-font-heading: "Rubik", sans-serif; /* Figma "font family/Font 1" */
  --brand-font-body: "Barlow", sans-serif; /* Figma "font family/Font 2" */

  /* --- Type scale (base 16, ratio 1.25) ---
   * Heading 2 is interpolated: the designer's set jumps 95 -> 61 with no H2
   * bound to a variable, and 76 is the scale step between them. */
  --brand-fs-h1: 95px;
  --brand-fs-h2: 76px;
  --brand-fs-h3: 61px;
  --brand-fs-h4: 49px;
  --brand-fs-h5: 31px;
  --brand-fs-h6: 25px;
  --brand-fs-display: 61px; /* Paragraph Display */
  --brand-fs-p-l: 25px;
  --brand-fs-p-m: 20px;
  --brand-fs-p-base: 16px;
  --brand-fs-p-s: 14px;
  --brand-fs-eyebrow: 16px;
  --brand-fs-eyebrow-s: 13px;
  --brand-fs-link: 16px;

  --brand-lh-heading: 1.1;
  --brand-lh-heading-tight: 1.2; /* H5, H6 */
  --brand-lh-body: 1.6;

  --brand-ls-h1: -3px;
  --brand-ls-h3: -1.8px;
  --brand-ls-eyebrow: 4px;
  /* The Figma "Text Link" token says 6, but every instance in the comps is
   * 0.96 — and 6 is visibly too wide (a 179px link renders at 240px). The
   * instances win. */
  --brand-ls-link: 0.96px;

  --brand-fw-heading: 500; /* Medium — H4/H5/H6, Paragraph Display */
  --brand-fw-heading-strong: 600; /* SemiBold — H1 */
  --brand-fw-heading-bold: 700; /* Bold — H3 */
  --brand-fw-body: 400;
  --brand-fw-body-medium: 500;
  --brand-fw-link: 600;

  /* ==================================================================
   * 2. THEME BRIDGE — Frisk's tokens, re-pointed at the brand
   * ================================================================== */

  --theme-color: var(--brand-refresh);
  --title-color: var(--brand-ink);
  --body-color: var(--brand-ink);

  --smoke-color: var(--brand-surface-muted);
  --smoke-color2: var(--brand-surface-light);
  --smoke-color3: var(--brand-surface-light);
  --smoke-color4: var(--brand-surface-muted);
  --smoke-color5: var(--brand-surface-light);

  --black-color: var(--brand-gunmetal);
  --gray-color: var(--brand-black-coffee);
  --white-color: var(--brand-white);
  --light-color: var(--brand-clay);
  --yellow-color: var(--brand-refresh);
  --error-color: var(--brand-ignition);
  --border-color: var(--brand-border);

  --title-font: var(--brand-font-heading);
  --body-font: var(--brand-font-body);

  /* Comps use a 120px section spacer (Frisk ships 140px). */
  --section-space: 120px;
}

/* --- Base type ---
 * Frisk sets body copy at 16/26px Poppins. Barlow at 1.6 line-height is the
 * designer's Paragraph Base; unitless keeps it inheritable. */
body {
  font-weight: var(--brand-fw-body-medium);
  line-height: var(--brand-lh-body);
}

/* Frisk's heading rules are weight-locked to Unbounded's range; Rubik's
 * equivalents sit a step lighter across the scale. */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: var(--brand-fw-heading);
  line-height: var(--brand-lh-heading);
}

h1,
.h1 {
  font-weight: var(--brand-fw-heading-strong);
  letter-spacing: var(--brand-ls-h1);
}

h3,
.h3 {
  font-weight: var(--brand-fw-heading-bold);
  letter-spacing: var(--brand-ls-h3);
}

h5,
.h5,
h6,
.h6 {
  line-height: var(--brand-lh-heading-tight);
}

/* ==================================================================
 * Shared primitives
 *
 * These restyle classes the Frisk theme already ships rather than adding
 * parallel ones, so sections ported from the theme later pick the new
 * treatment up for free. Two modifiers are ours: `.on-dark`, for the
 * Gunmetal sections where the accent flips from Ignition to Refresh.
 * ================================================================== */

/* --- Text link ("VIEW PAST SERIES ↗") ---
 * The theme's sweep-underline hover (:before/:after) is kept deliberately —
 * the designer annotated the Text Link component "No hover states included…
 * meant to indicate matching what is in the theme minus the font." The arrow
 * is a markup child (`<i>`), because both pseudo-elements are already spoken
 * for by that underline animation. */
.link-btn {
  font-size: var(--brand-fs-link);
  font-weight: var(--brand-fw-link);
  letter-spacing: var(--brand-ls-link);
  gap: 8px; /* Figma: 179 container - 159 text - 12 arrow */
}

/* The theme's arrow asset hardcodes a #0A0C00 stroke, so it can't follow the
 * link colour as an <img>. Masking it lets `currentColor` through instead —
 * Ignition on light surfaces, Refresh on dark. */
.link-btn__arrow {
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/icon/arrow-left-top.svg") no-repeat center /
    contain;
  mask: url("/assets/img/icon/arrow-left-top.svg") no-repeat center / contain;
}

.link-btn.on-dark,
.link-btn.on-dark:hover {
  color: var(--brand-refresh);
}

.link-btn.on-dark:before,
.link-btn.on-dark:after {
  background-color: var(--brand-refresh);
}

/* --- Buttons ---
 * Measured off the comps: Rubik 16/600 uppercase with no tracking, in a 26px
 * line box, 24px side padding and 11px top/bottom for the standard 48px
 * height. Primary is a Refresh fill with Gunmetal ink; the outline variant is
 * Ignition on light surfaces and Refresh on Gunmetal ones. Frisk's base `.btn`
 * was Gunmetal-on-white at 57px.
 *
 * The four colours resolve through inherited tokens rather than literals, so a
 * band re-points the hover on its own container instead of every slice growing
 * a `.btn` override. Declare them on :root, never on `.btn` itself — a custom
 * property set on the element beats one inherited from an ancestor, which
 * would lock every button to the default. */
:root {
  --btn-bg: var(--brand-refresh);
  --btn-ink: var(--brand-gunmetal);
  --btn-bg-hover: var(--brand-gunmetal);
  --btn-ink-hover: var(--brand-refresh);
}

.btn {
  background-color: var(--btn-bg);
  color: var(--btn-ink);
  font-size: var(--brand-fs-link);
  font-weight: var(--brand-fw-link);
  line-height: 1.625;
  /* Buttons are untracked in the comps; only text links carry the 0.96.
   * (Three button instances are drawn at 0.96 — Current Series, Mobile App and
   * Visit/Youth — against seven at 0. Treating that as designer drift.) */
  letter-spacing: normal;
  text-transform: uppercase;
  padding: 11px 24px;
  transition: background-color ease 0.3s, color ease 0.3s, border-color ease 0.3s;
}

.btn:hover,
.btn:focus-visible {
  background-color: var(--btn-bg-hover);
  color: var(--btn-ink-hover);
}

/* Dark surfaces take the hero's resolution — Refresh going to white — which is
 * the treatment the primary button is standardised on. It is scoped to dark
 * surfaces because white-on-white measures **1.00:1**: on the white sections
 * that carry most of the site's buttons, a white hover erases the rectangle
 * entirely. Light surfaces keep the Gunmetal inversion, the same swap in the
 * other direction, where the fill reads at 8.41:1 against the page.
 *
 * `.on-dark` is the manual escape for a button whose container is not listed. */
.on-dark,
.hero-wrapper,
.latest-message,
.about-offset--gunmetal,
.about-offset--flagstone,
.about-offset--ignition {
  --btn-bg-hover: var(--brand-white);
  --btn-ink-hover: var(--brand-gunmetal);
}

/* The three light About bands are the inverse problem: a Refresh fill on the
 * Refresh band is 1.00:1 and on Mint 1.14:1 — the button is not dim, it is
 * gone. Those bands invert the rectangle to Gunmetal (8.41:1 / 9.56:1) and
 * keep the white hover, so the standard reads the same way round. */
.about-offset--refresh,
.about-offset--mint,
.about-offset--clay {
  --btn-bg: var(--brand-gunmetal);
  --btn-ink: var(--brand-refresh);
  --btn-bg-hover: var(--brand-white);
  --btn-ink-hover: var(--brand-gunmetal);
}

.btn.btn-border {
  background-color: transparent;
  border: 1px solid var(--brand-ignition);
  color: var(--brand-ignition);
  padding: 10px 24px; /* 1px border keeps the 48px outer height */
}

.btn.btn-border:hover {
  background-color: var(--brand-ignition);
  color: var(--brand-white);
}

.btn.btn-border.on-dark {
  border-color: var(--brand-refresh);
  color: var(--brand-refresh);
}

.btn.btn-border.on-dark:hover {
  background-color: var(--brand-refresh);
  color: var(--brand-gunmetal);
}

/* ==================================================================
 * Theme colour escapes
 * One rule in style.css bakes Frisk's acid yellow into a gradient
 * instead of reading --theme-color, so the bridge can't reach it.
 * ================================================================== */
.cta-wrap2:after {
  background: linear-gradient(
    90deg,
    rgb(255 178 91 / 0) 0%,
    var(--brand-refresh) 20%,
    var(--brand-refresh) 80%,
    rgb(255 178 91 / 0) 100%
  );
}