/*
Theme Name: Clickety Clak
Theme URI: https://clicketyclaklb.com
Author: Clickety Clak
Author URI: https://clicketyclaklb.com
Description: Custom full-site-editing block theme for Clickety Clak, a 3D-printed toys and collectibles storefront. Built from scratch against docs/04-design-system-tokens.md — no code, markup, or assets derived from any third-party reference site.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clickety-clak
Tags: block-theme, full-site-editing, woocommerce, ecommerce

This theme's design tokens (color/type/spacing/radius/shadow) are sourced
exclusively from docs/04-design-system-tokens.md and theme.json. Component
CSS lives in assets/css/style.css and is loaded in addition to block-level
theme.json styles.
*/

/*
 * Metric-matched local fallback faces for the two self-hosted webfonts
 * (Baloo 2 / Nunito). Added by performance-optimizer, Phase 8 (2026-08-28).
 *
 * Why: theme.json's Baloo 2 / Nunito @font-face rules use
 * `font-display: swap`, which is correct for fast text paint (avoids
 * FOIT), but a naive swap from a generic system fallback to the real
 * webfont reflows text because the two fonts have different box metrics
 * -- measured as a real CLS regression (0.217, over the 0.1 budget) on
 * the product-grid category page during this phase's testing, caused
 * exactly by the Baloo 2 / Nunito "Web font loaded" swap event.
 *
 * Fix: a same-family-metrics fallback face, using a locally-installed
 * system font (Arial, near-universal) scaled via size-adjust /
 * ascent-override / descent-override so its line box is (near-)identical
 * to the real webfont's box *before* the swap happens. This is the
 * standard technique used by tools like Fontaine/next/font. Values were
 * computed from this theme's actual font files
 * (assets/fonts/baloo-2/baloo-2-variable.woff2,
 * assets/fonts/nunito/nunito-variable.woff2) via fontTools against
 * Arial's well-known OS/2 metrics (unitsPerEm 2048, ascent 1854,
 * descent 434, xAvgCharWidth 904) -- not guessed.
 *
 * These fallback family names are wired into theme.json's font-family
 * stacks ("Baloo 2", "Baloo 2 Fallback", ...) so they only take effect
 * during the brief window before the real webfont finishes loading.
 */
@font-face {
	font-family: "Baloo 2 Fallback";
	src: local("Arial");
	size-adjust: 148.2%;
	ascent-override: 72.75%;
	descent-override: 35.36%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Nunito Fallback";
	src: local("Arial");
	size-adjust: 128.23%;
	ascent-override: 78.83%;
	descent-override: 27.53%;
	line-gap-override: 0%;
}