/*
 * Title:   Design tokens
 * Project: Franz Valley Community Hub
 * Brief:   Shared design tokens for the site and login screen
 * File:    site/themes/franzvalley-mountain/assets/css/tokens.css
 *
 * Shared design tokens, loaded on the site and on wp-login.php.
 * Colours, fonts and spacing are defined once in theme.json (settings.color.palette,
 * settings.typography, settings.spacing, settings.custom.status) and only aliased here.
 * Tints are derived with color-mix(), so changing a palette colour updates them too.
 * Hex fallbacks apply only if the theme.json variables fail to load.
 *
 * Copyright 2026 Nexus Logic Inc.
 * SPDX-License-Identifier: MIT
 */

:root {
	--fv-evergreen: var(--wp--preset--color--evergreen, #24483F);
	--fv-evergreen-deep: var(--wp--preset--color--evergreen-deep, #1A352E);
	--fv-limestone: var(--wp--preset--color--limestone, #F3EDE2);
	--fv-paper: var(--wp--preset--color--paper, #FBF8F2);
	--fv-copper: var(--wp--preset--color--copper, #B96340);
	--fv-copper-deep: var(--wp--preset--color--copper-deep, #9C4F30);
	--fv-copper-darker: var(--wp--preset--color--copper-darker, #7E3F25);
	--fv-copper-light: var(--wp--preset--color--copper-light, #E7B59B);
	--fv-muted: var(--wp--preset--color--muted, #4F6A62);
	--fv-line: var(--wp--preset--color--line, #6A7D76);
	--fv-hairline: color-mix(in srgb, var(--fv-evergreen) 18%, transparent);
	--fv-on-dark-line: color-mix(in srgb, var(--fv-limestone) 28%, transparent);
	--fv-tint-on-light: color-mix(in srgb, var(--fv-evergreen) 8%, transparent);
	--fv-tint-on-light-soft: color-mix(in srgb, var(--fv-evergreen) 6%, transparent);
	--fv-tint-on-dark: color-mix(in srgb, var(--fv-limestone) 10%, transparent);
	--fv-tint-on-dark-strong: color-mix(in srgb, var(--fv-limestone) 18%, transparent);
	--fv-disabled-bg: color-mix(in srgb, var(--fv-limestone), var(--fv-evergreen-deep) 8%);
	--fv-disabled-border: color-mix(in srgb, var(--fv-limestone), var(--fv-evergreen-deep) 16%);
	--fv-disabled-field-bg: color-mix(in srgb, var(--fv-limestone), var(--fv-evergreen-deep) 5%);

	/* Semantic status colours: always paired with an icon or text label. */
	--fv-danger: var(--wp--custom--status--danger, #9B1C1C);
	--fv-danger-bg: var(--wp--custom--status--danger-bg, #FBE9E7);
	--fv-warning: var(--wp--custom--status--warning, #7A4B00);
	--fv-warning-bg: var(--wp--custom--status--warning-bg, #FCF1DC);
	--fv-success: var(--wp--custom--status--success, #1E6B3A);
	--fv-success-bg: var(--wp--custom--status--success-bg, #E7F3EA);
	--fv-info: var(--fv-evergreen);
	--fv-info-bg: var(--fv-paper);

	--fv-font-serif: var(--wp--preset--font-family--serif, Georgia, serif);
	--fv-font-sans: var(--wp--preset--font-family--sans, system-ui, sans-serif);
	--fv-font-heading: var(--fv-font-sans);
	--fv-action: var(--fv-evergreen);
	--fv-action-hover: var(--fv-evergreen-deep);
	--fv-action-text: var(--fv-paper);
	--fv-control-height: 48px;
	--fv-heading-section: clamp(1.25rem, 3vw, 1.5rem);
	--fv-heading-card: clamp(1.125rem, 2vw, 1.375rem);

	--fv-space-1: var(--wp--preset--spacing--20, .5rem);
	--fv-space-2: var(--wp--preset--spacing--30, .75rem);
	--fv-space-3: var(--wp--preset--spacing--40, 1rem);
	--fv-space-4: var(--wp--preset--spacing--50, 1.5rem);
	--fv-space-5: var(--wp--preset--spacing--60, 2.25rem);
	--fv-space-6: var(--wp--preset--spacing--70, 3rem);
	--fv-space-7: var(--wp--preset--spacing--80, 4.5rem);
	--fv-gutter: clamp(1rem, 4vw, 2rem);

	--fv-radius-sm: 6px;
	--fv-radius: 10px;
	--fv-radius-lg: 14px;
	--fv-shadow-color: var(--fv-evergreen-deep);
	--fv-shadow: 0 1px 2px color-mix(in srgb, var(--fv-shadow-color) 6%, transparent), 0 6px 16px color-mix(in srgb, var(--fv-shadow-color) 6%, transparent);
	--fv-shadow-raised: 0 10px 30px color-mix(in srgb, var(--fv-shadow-color) 25%, transparent);
	--fv-focus: 0 0 0 3px var(--fv-paper), 0 0 0 6px var(--fv-copper-deep);
}