/* ==========================================================================
   AI CHROME — BRAND: BMW (light canvas, grey footer band)
   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;                 /* SIGNATURE/tokens: nav height is 64px */
  --aih-height-mobile: 56px;          /* (inferred) */
  --aih-height-shrink: 56px;          /* (inferred) only with stickyStyle = shrink */
  --aih-radius: var(--aib-radius-control);   /* 0px = rectangular system */

  /* Logo text fallback: uppercase wordmark, weight 700, no tracking. */
  --aih-logo-family: var(--aib-font-display);
  --aih-logo-size: 22px;              /* (inferred) */
  --aih-logo-size-mobile: 20px;       /* (inferred) */
  --aih-logo-weight: 700;
  --aih-logo-transform: uppercase;
  --aih-logo-spacing: var(--aib-letter-spacing-display);
  --aih-logo-hover-color: var(--aib-text);   /* SIGNATURE: never the accent blue for chrome */

  /* Nav links: nav font + nav tracking (SIGNATURE: nav text is --aib-link,
     which the brand maps to --aib-text). */
  --aih-link-font: var(--aib-text-nav);
  --aih-link-transform: none;
  --aih-link-spacing: var(--aib-letter-spacing-nav);
  --aih-link-hover-color: var(--aib-text);
  --aih-link-hover-decoration: none;
  --aih-link-active-border: 2px solid var(--aib-text);   /* (inferred: 2px underline, like the tab) */

  /* CTA: blue background + on-primary text (layout default pair), square, flat.
     SIGNATURE: no hover state exists, so the hover background stays exactly the
     primary colour (no change) and the default brightness filter is dropped. */
  --aih-btn-font: var(--aib-text-button);
  --aih-btn-radius: var(--aib-radius-control);
  --aih-btn-height: 48px;             /* SIGNATURE/tokens: button height is 48px */
  --aih-btn-padding: 0 32px;          /* SIGNATURE: padding-inline 32px */
  --aih-btn-hover-bg: var(--aib-primary);
  --aih-btn-hover-filter: none;

  /* Icon button (burger, close): square (the whole system is rectangular). */
  --aih-icon-radius: var(--aib-radius-control);

  /* Dropdown / popmenu: square, hairline frame, flat — no shadow anywhere. */
  --aih-menu-radius: var(--aib-radius-control);
  --aih-menu-border: 1px solid var(--aib-border);
  --aih-menu-shadow: none;
  --aih-drawer-shadow: none;
  --aih-pinned-shadow: none;

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

  /* Pressed: the BMW tokens have no pressed-scale token, so the layout
     defaults (scale 1 / opacity 1) apply — a flat system with no motion. */
}

/* ---------- FOOTER ---------- */
:root {
  /* SIGNATURE: the footer background is --aib-surface-alt. */
  --aif-bg: var(--aib-surface-alt);
  /* (inferred) one step darker, so the preset-2 feature band reads as its own
     strip instead of merging with the footer surface. */
  --aif-bg-alt: var(--aib-surface2);

  /* Wordmark: uppercase, weight 700. */
  --aif-logo-family: var(--aib-font-display);
  --aif-logo-weight: 700;
  --aif-logo-transform: uppercase;
  --aif-logo-spacing: var(--aib-letter-spacing-display);

  /* Column titles: eyebrow label style — uppercase (default), tracked, ink
     (SIGNATURE: labels are ink, hairline-separated, never accent). */
  --aif-coltitle-font: var(--aib-text-eyebrow);
  --aif-coltitle-tracking: var(--aib-letter-spacing-label);
  --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 card: surface block, card radius, padded, no frame — depth
     comes from colour blocks, never from shadow. */
  --ait-card-bg: var(--aib-surface);
  --ait-card-radius: 4px;
  --ait-card-pad: var(--aib-gap-md);

  /* SIGNATURE hover: no hover state exists — pressed only. */
  --ait-hover-lift: 0px;

  /* Eyebrow/kicker: label transform + label tracking, ink, never accent. */
  --ait-kicker-transform: var(--aib-text-transform-label);
  --ait-kicker-spacing: var(--aib-letter-spacing-label);
  --ait-kicker-color: var(--aib-text);
  --ait-card-border: 1px solid var(--aib-border);
  --ait-media-radius: 2px;
  --ait-media-ratio: 3 / 2;
  --ait-section-gap: 2rem;
  --ait-single-title: 700 var(--aib-size-h1) / 1.05 var(--aib-font-display);
  --ait-related-title: 700 var(--aib-size-h4) / 1.2 var(--aib-font-display);
  --ait-dot-radius: 0;
  --ait-dot-h: 2px;
  --ait-dot-w: 14px;
  --ait-arrow-border: 1px solid var(--aib-border);
  --ait-arrow-radius: 2px;
  --ait-arrow-size: 38px;
}