/**
 * Vawell Power design tokens.
 *
 * This file is the single source of truth for the visual system. Components
 * should consume these variables instead of introducing one-off values.
 *
 * @package Vawell_Power
 */

/**
 * Local Lexend web fonts.
 *
 * Keeping the brand fonts inside the theme makes typography consistent during
 * development, migration, and production deployment without a third-party
 * font request.
 */
@font-face {
	font-family: "Lexend";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lexend/lexend-regular.ttf") format("truetype");
}

@font-face {
	font-family: "Lexend";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/lexend/lexend-medium.ttf") format("truetype");
}

@font-face {
	font-family: "Lexend";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/lexend/lexend-bold.ttf") format("truetype");
}

/**
 * Local Inter web fonts for body and interface text.
 */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter/inter-regular.ttf") format("truetype");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter/inter-medium.ttf") format("truetype");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter/inter-bold.ttf") format("truetype");
}

:root {
	/* Brand colours */
	--vp-color-red: #f90000;
	--vp-color-black: #1a1a1a;
	--vp-color-grey-900: #212121;
	--vp-color-white: #ffffff;
	--vp-color-blue: #003d7a;
	--vp-color-gold: #ff8f00;
	--vp-color-grey: #6a6b6d;

	/* Semantic colours */
	--vp-color-text: var(--vp-color-black);
	--vp-color-text-muted: var(--vp-color-grey);
	--vp-color-surface: var(--vp-color-white);
	--vp-color-surface-dark: var(--vp-color-black);
	--vp-color-border: rgb(26 26 26 / 14%);
	--vp-color-focus: var(--vp-color-blue);

	/* Typography */
	--vp-font-heading: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--vp-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--vp-font-sans: var(--vp-font-body);
	--vp-font-weight-regular: 400;
	--vp-font-weight-medium: 500;
	--vp-font-weight-bold: 700;
	--vp-font-size-body: 1rem;
	--vp-font-size-small: 0.875rem;
	--vp-font-size-display: clamp(3.25rem, 8vw, 9rem);
	--vp-font-size-h1: clamp(2.75rem, 6vw, 6rem);
	--vp-font-size-h2: clamp(2.25rem, 4vw, 4.5rem);
	--vp-font-size-h3: clamp(1.75rem, 2.5vw, 3rem);
	--vp-font-size-h4: clamp(1.25rem, 1.75vw, 1.75rem);
	--vp-line-height-tight: 0.98;
	--vp-line-height-heading: 1.08;
	--vp-line-height-body: 1.6;

	/* Spacing */
	--vp-space-1: 0.25rem;
	--vp-space-2: 0.5rem;
	--vp-space-3: 0.75rem;
	--vp-space-4: 1rem;
	--vp-space-5: 1.5rem;
	--vp-space-6: 2rem;
	--vp-space-7: 3rem;
	--vp-space-8: 4rem;
	--vp-space-9: 6rem;
	--vp-space-10: 8rem;
	--vp-section-space: clamp(4rem, 9vw, 10rem);

	/* Layout */
	--vp-content-max-width: 90rem;
	--vp-content-gutter: clamp(1.25rem, 4vw, 4rem);
	--vp-grid-gap: clamp(1rem, 2vw, 2rem);

	/* Shape and elevation */
	--vp-radius-sm: 0.5rem;
	--vp-radius-md: 1rem;
	--vp-radius-lg: 2rem;
	--vp-radius-pill: 999px;
	--vp-shadow-soft: 0 1rem 3rem rgb(26 26 26 / 10%);

	/* Motion */
	--vp-duration-fast: 180ms;
	--vp-duration-base: 300ms;
	--vp-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}