/* ==========================================================================
   AI CHROME — BRAND: Nike (light 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: 60px;                 /* SIGNATURE: header is 60px tall */
  --aih-height-mobile: 56px;          /* (inferred) */
  --aih-height-shrink: 52px;          /* (inferred) only with stickyStyle = shrink */

  /* Logo text fallback: display face, uppercase. */
  --aih-logo-family: var(--aib-font-display);
  --aih-logo-size: 28px;              /* (inferred) */
  --aih-logo-size-mobile: 24px;       /* (inferred) */
  --aih-logo-weight: 500;
  --aih-logo-transform: uppercase;
  --aih-logo-spacing: var(--aib-letter-spacing-display);

  /* Nav links: body-bold, no underline, colour never changes on hover,
     the active item gets a 2px underline. */
  --aih-link-font: var(--aib-text-body-bold);
  --aih-link-transform: none;
  --aih-link-spacing: 0;
  --aih-link-hover-color: var(--aib-text);
  --aih-link-hover-decoration: none;
  --aih-link-active-border: 2px solid var(--aib-text);

  /* CTA: black pill, hover primary-hover, no filter. */
  --aih-btn-font: var(--aib-text-button-sm);
  --aih-btn-radius: var(--aib-radius-pill);
  --aih-btn-height: 36px;             /* (inferred) fits the 60px header; the 48px button token is too tall */
  --aih-btn-padding: 0 var(--aib-gap-xl);
  --aih-btn-hover-bg: var(--aib-primary-hover);
  --aih-btn-hover-filter: none;

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

  /* Dropdown / popmenu: flat, hairline border, no outer shadow. */
  --aih-menu-radius: var(--aib-radius-card);
  --aih-menu-border: 1px solid var(--aib-border);
  --aih-menu-shadow: var(--aib-shadow-card);
  --aih-drawer-shadow: none;
  --aih-pinned-shadow: none;

  /* Topbar (Nike has none; kept in case it is turned on). */
  --aih-topbar-font: var(--aib-text-caption-sm);

  /* Pressed: NOT --aib-pressed-scale (Nike sets 0.5, which would shrink the
     button to half its size). */
  --aih-pressed-scale: 0.97;          /* (inferred) */
  --aih-pressed-opacity: var(--aib-pressed-opacity);
}

/* ---------- FOOTER ---------- */
:root {
  /* SIGNATURE: nav/footer chrome is ink — accent colours are not used. */
  --aif-link-color: var(--aib-text);
  --aif-link-hover-color: var(--aib-text-muted);

  /* Wordmark: display face, uppercase, weight 500. */
  --aif-logo-family: var(--aib-font-display);
  --aif-logo-size: 26px;              /* (inferred) */
  --aif-logo-weight: 500;
  --aif-logo-transform: uppercase;
  --aif-logo-spacing: var(--aib-letter-spacing-display);

  /* Column titles: caption-sm, ink (SIGNATURE: labels are ink, never accent). */
  --aif-coltitle-font: var(--aib-text-caption-sm);
  --aif-coltitle-color: var(--aib-text);
}

/* ---------- TEMPLATE (archive + single) ---------- */
/* Scope `.aib-page :is(...)`: template.css khai biến gốc trên `.aib-archive,
   .aid-single` — nếu brand khai ở `:root` thì THUA (cùng specificity nhưng
   template.css nạp sau) → brand mất bản sắc (nút/dots/card về mặc định). */
.aib-page :is(.aib-archive, .aid-single) {
  /* SIGNATURE product card: flat grey tile, no shadow, square image. */
  --ait-card-bg: transparent;
  --ait-media-radius: 0;

  /* SIGNATURE hover: colour only — nothing lifts and nothing scales. */
  --ait-hover-lift: 0px;

  /* Titles are uppercased (section titles follow the same transform). */
  --ait-title-transform: uppercase;

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

  /* CTA is the black pill; the label is NOT uppercase (SIGNATURE Button:
     "không gạch chân, không HOA"). Pagination/404 keep sentence case. */
  --ait-btn-radius: var(--aib-radius-pill);
  --ait-card-border: 0;
  --ait-card-radius: 0;
  --ait-card-pad: 0;
  --ait-media-ratio: 4 / 3;
  --ait-section-gap: 1.5rem;
  --ait-single-title: 700 var(--aib-size-display) / 1.02 var(--aib-font-display);
  --ait-related-title: 700 var(--aib-size-h4) / 1.1 var(--aib-font-display);
  --ait-dot-radius: 0;
  --ait-dot-h: 3px;
  --ait-dot-w: 24px;
  --ait-arrow-color: var(--aib-background);
  --ait-arrow-bg: var(--aib-text);
  --ait-arrow-radius: 0;
  --ait-arrow-size: 40px;
}