/*
 * Theme bridge
 *
 * Maps the brand tokens onto Razzi's own --rz-* custom properties, so the parts
 * of the site the theme draws (header, footer, mini cart, WooCommerce pages,
 * buttons, form fields) use brand colour and type instead of the Razzi demo
 * coral. This is what makes a new page look native rather than pasted in.
 *
 * THIS IS THE ONLY FILE THAT CHANGES THE APPEARANCE OF EXISTING PAGES.
 * Test on staging first. To disable it entirely, remove the tfc-theme-bridge
 * line from functions.php, nothing else depends on it.
 *
 * Razzi prints its Customizer output as an inline style attached to the parent
 * 'razzi' handle, which means it lands BEFORE this file. Plain declarations
 * therefore win, no !important needed.
 */

:root {
  /* Brand primary replaces the Razzi demo coral #FF6F61 */
  --rz-color-primary: var(--color-primary);
  --rz-color-hover-primary: var(--color-primary-hover);
  --rz-background-color-primary: var(--color-primary);
  --rz-border-color-primary: var(--color-primary);
  --rz-background-text-color-primary: var(--color-on-primary);
  --rz-lookbook-color-primary: var(--color-primary);

  /* Text and ink */
  --rz-color-dark: var(--color-text-heading);
  --rz-color-darker: var(--tfc-ink-800);
  --rz-text-color: var(--color-text-body);
  --rz-text-color-gray: var(--color-text-muted);
  --rz-text-color-hover: var(--color-primary-hover);
  --rz-color-placeholder: var(--color-text-faint);

  /* Surfaces */
  --rz-background-color-light: var(--color-surface-card);
  --rz-background-color-gray: var(--color-surface-sunken);
  --rz-background-color-dark: var(--color-surface-dark);

  /* Borders */
  --rz-border-color: var(--color-border);
  --rz-border-color-light: var(--color-border);
  --rz-border-color-gray: var(--color-border);
  --rz-border-color-dark: var(--color-text-heading);

  /* Type */
  --rz-font-family-primary: var(--font-body);
}

/* Headings across the whole site take the display face. */
h1, h2, h3, h4,
.entry-title,
.page-header .page-title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
}

/* Visible focus ring everywhere, using the brand colour. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
 * 6. Typography, sitewide
 *
 * Added 2 Sep 2026. Michael's decision: the whole site moves onto the kiln
 * dried landing page's faces, Alfa Slab One for display and Work Sans for
 * body, replacing Razzi's Hepta Slab.
 *
 * This works with the razzi-fonts dequeue in functions.php, not instead of it.
 * The dequeue removes the Hepta Slab FILE; without the rules below, Razzi's
 * Customizer CSS would still ask for "Hepta Slab" by name and land on a
 * generic serif.
 *
 * No !important anywhere, and none is needed: Razzi attaches its Customizer
 * output as an inline style on the `razzi` handle, which prints before this
 * file, so equal specificity wins here.
 *
 * If any chrome still renders in the wrong face after deploying, add the
 * offending selector to one of the two lists below rather than reaching for
 * !important.
 * ------------------------------------------------------------- */

body,
button,
input,
select,
optgroup,
textarea,
.site-header,
.site-header a,
.site-footer,
.site-footer a,
.rz-menu a,
.widget,
.woocommerce-Price-amount,
.price,
.button,
.wp-block-button__link {
  font-family: var(--font-body);
}

/* Alfa Slab One ships one weight only. Asking for 700 gets a synthetic bold,
   which smears the slabs. Every display selector is pinned to 400. */
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.page-header .page-title,
.product_title,
.widget-title,
.section-title,
.rz-section-title,
.woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
}