/* ==========================================================================
   AI CHROME — BRAND: Spotify (dark canvas)
   One file per brand. Three groups:
     header   — vars consumed by ai-header.css (--aih-*)
     footer   — vars consumed by ai-footer.css (--aif-*)
     template — vars consumed by content.css for the real archive/single
                (WP) templates (--ait-*)
   RULES
   - Colors/typography ALWAYS through design tokens: var(--aib-*). Never hex,
     never rgb()/hsl(), never a font-family name. A user-chosen color/font
     (palette, injected AFTER tokens.css) must always win over the brand.
   - Declare only what differs from the defaults in ai-header/footer.css.
   - English comments only. No selector other than :root.
   - "(inferred)" = SIGNATURE.md / tokens.css do not state the value.
   ========================================================================== */

/* ---------- HEADER ---------- */
:root {
  /* Size */
  --aih-height: 64px;                 /* (inferred) */
  --aih-height-mobile: 56px;          /* (inferred) */
  --aih-height-shrink: 56px;          /* (inferred) only with stickyStyle = shrink */
  --aih-radius: var(--aib-radius-control);

  /* Logo text fallback: mixed-case wordmark in ink. */
  --aih-logo-family: var(--aib-font-display);
  --aih-logo-size: 26px;              /* (inferred) */
  --aih-logo-size-mobile: 22px;       /* (inferred) */
  --aih-logo-weight: 700;
  --aih-logo-transform: none;
  --aih-logo-spacing: var(--aib-letter-spacing-display);
  /* SIGNATURE: green is reserved for play / active / the main CTA. */
  --aih-logo-hover-color: var(--aib-text);

  /* SIGNATURE: nav and secondary links are muted, sentence case; hover turns
     ink and adds an underline (never green). */
  --aih-link-font: var(--aib-text-caption);
  --aih-link-transform: none;
  --aih-link-spacing: 0;
  --aih-link-color: var(--aib-text-muted);
  --aih-link-hover-color: var(--aib-text);
  --aih-link-hover-decoration: underline;
  --aih-link-active-border: none;

  /* CTA: round green pill with on-primary text (layout default pair), caps
     font, hover primary-hover, no scale. */
  --aih-btn-font: var(--aib-text-button);
  --aih-btn-radius: var(--aib-radius-pill);
  --aih-btn-height: 40px;             /* (inferred) */
  --aih-btn-padding: 0 var(--aib-gap-lg);
  --aih-btn-hover-bg: var(--aib-primary-hover);
  --aih-btn-hover-filter: none;

  /* Icon button (burger, close): round — avatars/controls are circles. */
  --aih-icon-radius: var(--aib-radius-circle);

  /* Dropdown / popmenu: control radius, no frame (token border-card = none),
     heavy dialog depth. */
  --aih-menu-radius: var(--aib-radius-control);
  --aih-menu-border: var(--aib-border-card);
  --aih-menu-shadow: var(--aib-shadow-dialog);
  --aih-drawer-shadow: var(--aib-shadow-dialog);
  --aih-pinned-shadow: none;

  /* Topbar (Spotify does not use one; kept in case it is turned on). */
  --aih-topbar-font: var(--aib-text-caption);
}

/* ---------- FOOTER ---------- */
:root {
  /* SIGNATURE: no inverted footer — the dark canvas simply continues, links
     stay muted and only the hover brightens. */
  --aif-link-color: var(--aib-text-muted);
  --aif-link-hover-color: var(--aib-text);

  /* Wordmark: mixed case, weight 700. */
  --aif-logo-family: var(--aib-font-display);
  --aif-logo-size: 24px;              /* (inferred) */
  --aif-logo-weight: 700;
  --aif-logo-transform: none;
  --aif-logo-spacing: var(--aib-letter-spacing-display);

  /* Column titles: sentence case (Spotify never uppercases UI labels). */
  --aif-coltitle-transform: none;
  --aif-coltitle-tracking: 0;
  --aif-coltitle-color: var(--aib-text-muted);
}

/* ---------- TEMPLATE (archive + single) ---------- */
:root {
  /* SIGNATURE card: raised surface tile, card radius, padded, no frame. */
  --ait-card-bg: var(--aib-surface-alt);
  --ait-card-radius: var(--aib-radius-card);
  --ait-card-pad: var(--aib-gap-md);

  /* SIGNATURE hover: the tile brightens — it never scales or translates. */
  --ait-hover-lift: 0px;

  /* Chip face: sentence case (never uppercased), ink. */
  --ait-kicker-transform: none;
  --ait-kicker-color: var(--aib-text);

  /* SIGNATURE button: round green pill with an uppercase label. */
  --ait-btn-radius: var(--aib-radius-pill);
  --ait-btn-transform: uppercase;
}