/*
Theme Name: EMF V3
Theme URI: https://eatmorefish.ie
Author: WebHero
Description: EatMoreFish V3 — premium editorial seafood retail. Two journeys: Fresh Fish & Seafood, and Ready to Eat.
Version: 0.1.36
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: emf-v3
*/

/*
 * Design tokens from the EMF/V3 design pack.
 * Everything else lives in assets/css/ and is enqueued, never hard-coded into header.php.
 */

/*
 * Self-hosted type (2026-08-03, owner-approved download from Google Fonts,
 * latin subset, ~131KB across six files). Until these existed the token
 * stacks below named fonts nobody served, and the whole site quietly ran on
 * system fallbacks. font-display: swap so text never blocks on a font;
 * inc/assets.php preloads the body 400 to keep the swap flash short.
 * Weights are the design handoff's set: body 400/500/700/800, condensed
 * display 700/800. Gagalin stays first in the display stack — licensed but
 * never supplied — and Roboto Condensed is its working fallback.
 */
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/roboto-400.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/roboto-500.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/roboto-700.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("assets/fonts/roboto-800.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/roboto-condensed-700.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("assets/fonts/roboto-condensed-800.woff2") format("woff2");
}

:root {
	/* Structural */
	--emf-navy-deep: #071F38;
	--emf-navy-brand: #204282;
	--emf-navy-ink: #0B1F35;
	--emf-navy-text: #12233A;

	/* Accents */
	--emf-teal: #3EAEB3;
	--emf-lime: #E8F140;
	--emf-orange: #F36B21;
	--emf-gold: #D6A54B;

	/* Surfaces */
	--emf-white: #FFFFFF;
	--emf-cream: #F7F5F0;
	--emf-mist: #E8E9EA;
	--emf-border: #D8DEE7;
	--emf-muted: #667085;

	/* Type */
	--emf-font-body: "Roboto", system-ui, -apple-system, sans-serif;
	--emf-font-display: "Gagalin", "Roboto Condensed", Impact, sans-serif;
	--emf-font-editorial: Georgia, "Times New Roman", serif;

	/* Layout */
	--emf-max-width: 1440px;
	--emf-gutter: clamp(1.125rem, 4vw, 3.75rem);

	/* Spacing rhythm: 8 / 16 / 24 / 32 / 48 / 70 */
	--emf-space-1: 0.5rem;
	--emf-space-2: 1rem;
	--emf-space-3: 1.5rem;
	--emf-space-4: 2rem;
	--emf-space-5: 3rem;
	--emf-space-6: 4.375rem;

	/*
	 * Derived tints — registered 2026-08-03 from the design handoff
	 * (new ui/…/README.md "Design tokens"), which derives every one of these
	 * from the base palette above. Named for ROLE, not for hue, so a future
	 * repaint edits values here and nowhere else.
	 *
	 * Contrast notes from the handoff: teal TEXT always uses --emf-teal-deep
	 * (AA on the teal tints); orange text on tints uses --emf-orange-text /
	 * --emf-orange-text-strong; --emf-gold-text is the AA text for gold
	 * outline CTAs.
	 */
	--emf-teal-deep: #1F6B6F;
	--emf-teal-tint: #E9F6F6;
	--emf-teal-tint-soft: #F0F9F9;
	--emf-teal-tint-faint: #F5FBFB;
	--emf-teal-tint-border: #BCE1E2;
	--emf-teal-on-navy: #7FD4D8;

	--emf-chip-navy-bg: #EAF0FA;
	--emf-chip-navy-border: #C3D2EC;
	--emf-chip-grey-bg: #EFF1F3;
	--emf-chip-grey-border: #D8DEE7;
	--emf-chip-grey-text: #4A5568;
	--emf-chip-gold-bg: #FBF3E2;
	--emf-chip-gold-border: #E8D3A4;
	--emf-chip-gold-text: #7A5A17;

	--emf-orange-tint: #FDF0E8;
	--emf-orange-tint-border: #F3C7A8;
	--emf-orange-text: #B34A12;
	--emf-orange-text-strong: #7A3A10;
	--emf-orange-field-bg: #FFFBF8;

	--emf-gold-text: #8A6420;
	--emf-gold-tint: #FBF6EA;

	--emf-disabled-bg: #C7CFD9;
	--emf-disabled-text: #5E6B7B;

	--emf-placeholder-bg: #EFF3F6;
	--emf-placeholder-glyph: #8FA3B8;
	--emf-row-rule: #EDF0F3;
	--emf-hover-row: #FAFBFC;
	--emf-cream-border: #E5DFD0;
}