/* saltino-tokens.css — Design token layer for the Saltino child theme.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * saltino.css is the Standard Bricks HTML (SBH) stylesheet ported from
 * themes/saltino-html. It consumes ~39 custom properties but defines only 16
 * of them in its own :root block. The remaining ~25 are Style Manager tokens.
 *
 * In the static HTML source those tokens were supplied by saltino.preview.css,
 * which was deliberately NOT ported (it declares itself "PREVIEW ONLY" on the
 * assumption that Bricks Style Manager would own the tokens natively). That
 * assumption was never implemented, so 187 of 329 var() references (56%) on the
 * homepage resolved to nothing: spacing collapsed to 0, colours fell back to
 * inherit, and grid/flex geometry built on --space-* fell apart.
 *
 * PRECEDENCE
 * ----------
 * The same token names are registered as Bricks global variables
 * (wp_options.bricks_global_variables). Bricks prints its :root block via
 * bricks-frontend-inline-inline-css AFTER this stylesheet, so **Bricks wins** and
 * the tokens stay editable in Bricks → Style Manager. The :root block below is a
 * deterministic fallback so the design can never silently collapse again.
 *
 * Dark mode must beat Bricks' :root. :root and [data-theme] have equal
 * specificity (0,1,0), so the mirror below is written as html[data-theme="dark"]
 * (0,1,1) to win regardless of stylesheet order.
 *
 * @package Saltino
 */

/* ==========================================================================
   0. Typeface — self-hosted Vazirmatn variable font (PERF-03)
   ========================================================================== */
@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/vazirmatn-arabic.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
	               U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FDFD;
}

@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/vazirmatn-latin.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* ==========================================================================
   1. Tokens — light (fallback; Bricks global variables take precedence)
   ========================================================================== */
:root {
	/* Palette */
	--brand-accent: #2e4a68;
	--primary: #2e4a68;
	--primary-dark: #1f3550;
	--primary-light: #4b6c8f;
	--secondary: #d7a85d;
	--secondary-dark: #b08a45;
	--accent: #d9a6b3;
	--surface: #ffffff;
	--surface-page: #f7f8fa;
	--surface-soft: #f7f8fa;
	--border: #e5e7eb;
	--text: #273244;
	--text-muted: #6b7280;
	--text-inverse: #ffffff;

	/* Semantic aliases consumed by saltino.css */
	--primary-color: var(--primary);
	--primary-color-dark: var(--primary-dark);
	--primary-color-light: var(--primary-light);
	--secondary-color: var(--secondary);
	--secondary-color-dark: var(--secondary-dark);
	--accent-color: var(--accent);
	--surface-card: var(--surface);
	--color-bg-surface: var(--surface);
	--border-subtle: var(--border);
	--border-color: var(--border);
	--color-bg-alt: var(--surface-soft);
	--color-text: var(--text);
	--color-text-muted: var(--text-muted);
	--color-text-inverse: var(--text-inverse);

	/* Type scale */
	--text-xs: 0.75rem;
	--text-s: 0.875rem;
	--text-m: 1rem;
	--text-l: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;

	/* Spacing scale */
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-s: 0.75rem;
	--space-m: 1rem;
	--space-l: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;

	/* Motion Dynamics (Cupertino / Linear Spring Deceleration) */
	--ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out: cubic-bezier(0.2, 0, 0, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
	--transition-instant: 0.08s var(--ease-out);
	--transition-fast: 0.18s var(--ease-out);
	--transition-base: 0.28s var(--ease-spring);
	--transition-smooth: 0.45s var(--ease-spring);

	/* Elevation & Shadow Physics (Multi-stop Ambient + Key light) */
	--shadow-xs: 0 1px 2px rgba(31, 53, 80, 0.04);
	--shadow-sm: 0 1px 3px rgba(31, 53, 80, 0.05), 0 1px 2px rgba(31, 53, 80, 0.03);
	--shadow-md: 0 4px 8px -2px rgba(31, 53, 80, 0.06), 0 2px 4px -1px rgba(31, 53, 80, 0.04);
	--shadow-lg: 0 12px 20px -4px rgba(31, 53, 80, 0.08), 0 4px 6px -2px rgba(31, 53, 80, 0.04);
	--shadow-xl: 0 20px 28px -6px rgba(31, 53, 80, 0.1), 0 8px 10px -4px rgba(31, 53, 80, 0.05);
	--shadow-card-hover: 0 14px 26px -4px rgba(31, 53, 80, 0.09), 0 6px 12px -2px rgba(31, 53, 80, 0.04);
	--shadow-inner-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.25);

	/* Translucent & Glass Borders */
	--border-hairline: rgba(46, 74, 104, 0.07);
	--border-focus-ring: rgba(46, 74, 104, 0.22);
}

/* ==========================================================================
   2. Tokens — dark mirror (BRCK-02)
   Specificity (0,1,1) beats Bricks' :root (0,1,0) on purpose.
   ========================================================================== */
html[data-theme="dark"],
body[data-theme="dark"] {
	/* Retain the admin brand accent, re-tinted for dark surfaces (BRCK-02) */
	--primary: color-mix(in srgb, var(--brand-accent, #2e4a68) 55%, #cfe4ff);
	--primary-dark: color-mix(in srgb, var(--brand-accent, #2e4a68) 38%, #cfe4ff);
	--primary-light: color-mix(in srgb, var(--brand-accent, #2e4a68) 75%, black);
	--secondary: #e8c078;
	--secondary-dark: #cda252;
	--accent: #e5b8c3;
	--surface: #172132;
	--surface-page: #0b1320;
	--surface-soft: #121c2b;
	--border: rgba(255, 255, 255, 0.09);
	--border-subtle: rgba(255, 255, 255, 0.09);
	--border-hairline: rgba(255, 255, 255, 0.06);
	--border-focus-ring: rgba(207, 228, 255, 0.28);
	--text: #f8fafc;
	--text-muted: #94a3b8;
	--text-inverse: #0b1320;

	/* Dark Elevation Shadows */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -1px rgba(0, 0, 0, 0.35);
	--shadow-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.65), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
	--shadow-xl: 0 20px 28px -6px rgba(0, 0, 0, 0.75), 0 8px 10px -4px rgba(0, 0, 0, 0.5);
	--shadow-card-hover: 0 16px 30px -4px rgba(0, 0, 0, 0.8), 0 6px 12px -2px rgba(0, 0, 0, 0.5);
	--shadow-inner-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   3. Base reset
   saltino.css assumes these are already applied by the preview stylesheet.
   Bricks' own reset does not set the Vazirmatn stack or bind body colours to
   the token layer.
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 100%;
}

body {
	margin: 0;
	font-family: "Vazirmatn", Tahoma, system-ui, sans-serif;
	color: var(--color-text);
	background-color: var(--surface-card);
	line-height: 1.6;
	transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme="dark"] body,
body[data-theme="dark"] {
	background-color: #0f172a;
}

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