/*
Theme Name: WebChef20
Theme URI: https://www.webchef.ca/
Description: Standalone parent theme for WebChef Cast sites. Holds cast-templates design + content (git-managed).
Author: Mark
Version: 0.1.0
Requires at least: 6.4
*/

/* =======================================================================
   WebChef20 base stylesheet — design tokens, reset, elements, accessibility.
   Loaded on every page AND in the Cast canvas. Generated assets/utilities.css
   loads immediately afterward. Utility scales and policies are configured in
   config/utilities.php; docs/utility-reference.md lists classes and tokens.
   Per-template styles own component detail and reference these tokens.
   ======================================================================= */

/* ---- Design tokens --------------------------------------------------- */
:root {
	/* Spacing scale (0.25rem base). */
	--space-1: 0.25rem;  /*  4px */
	--space-2: 0.5rem;   /*  8px */
	--space-3: 0.75rem;  /* 12px */
	--space-4: 1rem;     /* 16px */
	--space-6: 1.5rem;   /* 24px */
	--space-8: 2rem;     /* 32px */
	--space-12: 3rem;    /* 48px */
	--space-16: 4rem;    /* 64px */
	--space-20: 5rem;    /* 80px */

	/* Semantic brand colors shared by components and utilities. */
	--color-bg: #faf7f1;
	--color-surface: #f1ece3;
	--color-surface-2: #E8E1D3;
	--color-text: #1c1917;
	--color-muted: #6b645a;
	--color-border: #DED6C6;
	--color-primary: #c2410c;
	--color-primary-text: #FFF7ED;
	--color-accent-soft: color-mix(in srgb, var(--color-primary) 12%, transparent);
	--color-accent-tint: #F2A56E;

	/* Typography. */
	--font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-body: Inter, system-ui, sans-serif;
	--font-display: "Playfair Display", Georgia, serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--text-base: 1.1875rem;  /* 19px — brand modular type scale base. */
	--text-xs: calc(var(--text-base) * 0.75);
	--text-sm: calc(var(--text-base) * 0.875);
	--text-lg: calc(var(--text-base) * 1.25);
	--text-xl: calc(var(--text-base) * 1.5);
	--text-2xl: calc(var(--text-base) * 2);
	--text-3xl: calc(var(--text-base) * 2.5);
	--text-display: clamp(calc(var(--text-base) * 2.25), 5vw, calc(var(--text-base) * 3.5));
	--leading-tight: 1.2;
	--leading-normal: 1.6;
	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/* Radii (brand). */
	--radius-sm: 0.4375rem;   /*  7px */
	--radius: 0.875rem;       /* 14px */
	--radius-md: var(--radius);
	--radius-lg: 1.3125rem;   /* 21px */
	--radius-pill: 999px;

	/* Elevation (brand). */
	--shadow-sm: 0 1px 2px rgba(28, 25, 23, .05);
	--shadow-md: 0 6px 18px rgba(28, 25, 23, .08);
	--shadow-lg: 0 24px 60px rgba(28, 25, 23, .14);

	/* Motion + layout (brand). */
	--ease: cubic-bezier(.22, 1, .36, 1);
	--maxw: 75rem;          /* 1200px — template content width */

	/* Layout. */
	--container-max: 72rem;   /* 1152px */
	--gutter: var(--space-4);
	--grid-card-min: 16rem;   /* Auto-fit card width; override on a component. */

	/* Motion (the VT crossfade duration — one source of truth; see
	   transitions.css). */
	--t-fast: 100ms;
	--t-normal: 150ms;
}

/* ---- Base reset / elements ------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	line-height: var(--leading-normal);
	color: var(--color-text);
	background: var(--color-bg);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--color-primary);
}

/* ---- Accessibility utilities ------------------------------------------ */
/* Visually hide text but keep it for screen readers. The shell's skip-link
   relies on this; we define it ourselves so it's present on cast pages too
   (where the block-library CSS that normally ships it is dequeued — see
   inc/cleanup.php). Standard WP pattern. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
/* Reveal on focus/active so keyboard users get the skip-link. */
.skip-link:focus,
.screen-reader-text:focus {
	background: var(--color-bg);
	border-radius: var(--radius);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
	clip: auto !important;
	clip-path: none;
	color: var(--color-text);
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	height: auto;
	left: var(--space-2);
	padding: var(--space-3) var(--space-4);
	position: absolute;
	top: var(--space-2);
	width: auto;
	z-index: 100000;
	text-decoration: none;
}

/* Utilities are generated from config/utilities.php into assets/utilities.css.
   Run `php tools/generate-utilities.php`; never edit the generated file. */