/**
 * Quartier Sila — Design Tokens
 * -----------------------------
 * Single source of truth for colors, typography and the layout scale.
 * Values mirror the Figma file (sila › Sila4).
 */

/* Fonts (self-hosted) -------------------------------------------------- */
@font-face {
	font-family: "Steelfish";
	src: url("../fonts/steelfish-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lato";
	src: url("../fonts/lato-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Lato";
	src: url("../fonts/lato-300-italic.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Bricks frontend.min.css sets html { font-size: 62.5% } (10px rem base).
   Restore the standard 16px base. */
html {
	font-size: 100%;
}

:root {
	/* Palette (Figma color styles) */
	--sila-ink: #1e1e1e;
	--sila-sand: #c5a380;
	--sila-cream: #eef0eb;
	--sila-navy: #112a3b;

	/* Typography */
	--sila-font-display: "Steelfish", "Arial Narrow", sans-serif;
	--sila-font-sans: "Lato", ui-sans-serif, system-ui, sans-serif;

	/* Layout scale — 1 Figma px on a 1920 frame, shrinking with the section
	   width below that. Sections are inline-size containers, so `cqw`
	   resolves against the section (no scrollbar drift); outside a
	   container it falls back to the viewport. */
	--u: min(1px, calc(100cqw / 1920));

	/* Rhythm */
	--sila-gutter: max(20px, calc(154 * var(--u)));
	--sila-container: 1612px;
	--sila-radius: max(32px, calc(64 * var(--u)));
	--sila-radius-card: max(32px, calc(52 * var(--u)));
	--sila-section-pad: max(64px, calc(154 * var(--u)));
	--sila-stack-gap: max(48px, calc(102 * var(--u)));

	/* Motion */
	--sila-ease: cubic-bezier(0.65, 0, 0.35, 1);      /* in-out, hovers */
	--sila-ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out, reveals */
	--sila-hover-duration: 0.6s;
}