/* ============================================================
   BERNIE DELI — Design System Tokens
   Color, type, spacing, radius, shadow, motion
   ============================================================ */

/* ------------ Font imports ------------ */
/* Brand fonts (substitutions documented in README.md):
   - Display (hero serif): Fraunces — warm, friendly, optical-size aware
     (matches the user-preferred "Enjoy Your Morning Coffee" reference)
   - Script wordmark: Pacifico — used ONLY for the "Bernie" wordmark
   - Poster alt (condensed): Anton — for big diner/poster moments
   - Sans body/UI: Inter
   - Mono: JetBrains Mono (rare; receipts, codes)

   Las fuentes web NO se importan aqui (5-sep-2026): un @import dentro de un CSS
   encadena dos viajes de red antes del primer pintado (tokens.css -> Google).
   Cada pagina las pide con <link rel="preload" as="style"> + <link media="print">
   que app.js pasa a "all" (carga sin bloquear el render). Solo se piden las que
   el sitio usa de verdad: Fraunces 400-700 (+ italica 400/600), Inter 400-800 y
   Pacifico. Anton y JetBrains Mono quedan en las pilas como preferencia local.
*/

/* Fallbacks con metricas ajustadas: mientras llega la fuente web, el texto se
   dibuja con Georgia/Arial ocupando (casi) el mismo espacio, asi el cambio de
   fuente no mueve el layout (CLS). Valores de Fraunces y de Inter contra sus
   fallbacks del sistema. */
@font-face {
	font-family: "Fraunces Fallback";
	src: local("Georgia");
	size-adjust: 100%;
	ascent-override: 98%;
	descent-override: 27%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial");
	size-adjust: 107%;
	ascent-override: 90%;
	descent-override: 22%;
	line-gap-override: 0%;
}

:root {
	/* ----------- PRIMARY PALETTE (locked) ----------- */
	--navy-900: #08134f; /* deepest, app dark bg */
	--navy-800: #0a1a6e; /* brand navy — logo, primary fills */
	--navy-700: #14246b; /* hover state for navy */
	--navy-600: #1f3185; /* press / lighter accent */

	--cream-50: #fffcf5; /* page background light */
	--cream-100: #f7f2e8; /* cards on cream */
	--cream-200: #f5f3f0; /* brand cream — base */
	--cream-300: #ece5d5; /* dividers, subtle fills */

	--paper-white: #ffffff;
	--ink-black: #0e0e10;

	/* ----------- WARM / COFFEE ACCENT ----------- */
	/* Used for CTAs in dark surfaces (inspired by coffee app reference)
     and for product photography moods. Pulled from latte foam + crema. */
	--coffee-50: #f7e8d4;
	--coffee-100: #e8c9a0;
	--coffee-300: #c29363;
	--coffee-500: #a06a3f; /* primary CTA on dark — warm clay */
	--coffee-600: #8a5732; /* press */
	--coffee-700: #6e4225;

	/* ----------- SUPPORTING / FOOD CATEGORY HUES ----------- */
	/* Only used inside categorical chips, product tags, or category artwork.
     Never as page-level brand colour. */
	--leaf-500: #4a7c3a; /* smoothies/detox/veggie */
	--berry-500: #8e2c4e; /* berry/tropical */
	--mustard-500: #c29a2c; /* breakfast (used VERY sparingly — never gold near logo) */

	/* ----------- SEMANTIC ----------- */
	--success: #2f8f4f;
	--warning: #d08a2a;
	--danger: #c2402a;
	--info: #2f6bc9;

	/* ----------- SURFACE TOKENS (LIGHT — default) ----------- */
	--bg: var(--cream-50);
	--bg-elev: var(--paper-white);
	--bg-sunken: var(--cream-100);
	--bg-card: var(--paper-white);
	--bg-inverse: var(--navy-800);

	--fg: var(--navy-800); /* primary text */
	--fg-muted: #5a6385; /* secondary text — navy desaturated */
	--fg-subtle: #66708f; /* tertiary, captions — 4.8:1 sobre cream-50 (AA); #8c95b0 daba 2.9 */
	--fg-inverse: var(--cream-200);

	--border: #e3dcc9;
	--border-strong: var(--navy-800);
	--divider: rgba(10, 26, 110, 0.1);

	--accent: var(--navy-800);
	--accent-fg: var(--cream-200);
	--cta: var(--navy-800);
	--cta-fg: var(--cream-200);
	--cta-hover: var(--navy-700);

	/* ----------- TYPE ----------- */
	--font-display:
		"Fraunces", "Fraunces Fallback", "Georgia", serif; /* primary hero/display — warm serif */
	--font-script: "Pacifico", cursive; /* "Bernie" wordmark only */
	--font-poster:
		"Anton", "Bebas Neue", "Arial Narrow", sans-serif; /* condensed poster alt */
	--font-sans:
		"Inter", "Inter Fallback", "Helvetica Neue", system-ui, sans-serif; /* UI + body */
	--font-serif:
		"Fraunces", "Fraunces Fallback", "Georgia", serif; /* serif accent (same family) */
	--font-mono: "JetBrains Mono", ui-monospace, monospace;

	/* Scale — fluid, optimised for poster-style brand */
	--fs-12: 12px;
	--fs-13: 13px;
	--fs-14: 14px;
	--fs-15: 15px;
	--fs-16: 16px;
	--fs-18: 18px;
	--fs-20: 20px;
	--fs-24: 24px;
	--fs-32: 32px;
	--fs-40: 40px;
	--fs-56: 56px;
	--fs-72: 72px;
	--fs-96: 96px;
	--fs-128: 128px;

	/* ----------- SPACING (8 / 4 hybrid) ----------- */
	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;

	/* ----------- RADIUS ----------- */
	--r-xs: 4px;
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 18px; /* cards */
	--r-xl: 28px; /* photo tiles, hero cards */
	--r-2xl: 40px; /* coffee-app product cards */
	--r-pill: 999px;
	--r-stamp: 9999px; /* circular badges */

	/* ----------- SHADOW / ELEVATION ----------- */
	--shadow-sm:
		0 1px 2px rgba(10, 19, 79, 0.06), 0 1px 1px rgba(10, 19, 79, 0.04);
	--shadow-md:
		0 6px 18px -8px rgba(10, 19, 79, 0.18), 0 2px 4px rgba(10, 19, 79, 0.06);
	--shadow-lg:
		0 24px 48px -20px rgba(10, 19, 79, 0.32),
		0 8px 16px -8px rgba(10, 19, 79, 0.14);
	--shadow-glow: 0 0 0 6px rgba(10, 26, 110, 0.08);

	/* Inset stamp impression (used on badges & vintage stamps) */
	--shadow-stamp-inset:
		inset 0 0 0 3px var(--navy-800), inset 0 0 0 5px var(--cream-200),
		inset 0 0 0 6px var(--navy-800);

	/* ----------- MOTION ----------- */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in: cubic-bezier(0.55, 0, 1, 0.45);
	--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dur-1: 120ms;
	--dur-2: 200ms;
	--dur-3: 320ms;
	--dur-4: 480ms;
}

/* =====================================================================
   DARK SURFACE — used on the ordering app, hero panels, marketing banners.
   Inspired by the coffee-app reference (warm dark + cream + clay CTA).
   ===================================================================== */
[data-surface="dark"],
.surface-dark {
	--bg: var(--navy-900);
	--bg-elev: #0d1858;
	--bg-sunken: #060e3c;
	--bg-card: #0f1b5e;
	--bg-inverse: var(--cream-200);

	--fg: var(--cream-200);
	--fg-muted: rgba(245, 243, 240, 0.72);
	--fg-subtle: rgba(245, 243, 240, 0.5);
	--fg-inverse: var(--navy-800);

	--border: rgba(245, 243, 240, 0.12);
	--border-strong: var(--cream-200);
	--divider: rgba(245, 243, 240, 0.1);

	--accent: var(--cream-200);
	--accent-fg: var(--navy-800);

	/* On dark, CTA shifts to the warm clay seen in the inspiration app */
	--cta: var(--coffee-500);
	--cta-fg: var(--cream-200);
	--cta-hover: var(--coffee-600);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 28px 56px -16px rgba(0, 0, 0, 0.6);
}

/* =====================================================================
   SEMANTIC TYPOGRAPHY (use these classes / element tags, not raw values)
   ===================================================================== */

html,
body {
	font-family: var(--font-sans);
	color: var(--fg);
	background: var(--bg);
	font-size: var(--fs-16);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* The Bernie wordmark — only ever for the brand name itself */
.t-wordmark,
.bernie-script {
	font-family: var(--font-script);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 0.9;
}

/* Hero display — warm serif, mixed case. "Enjoy Your Morning Coffee" energy. */
.t-display,
h1.display {
	font-family: var(--font-display);
	font-variation-settings:
		"opsz" 144,
		"SOFT" 50;
	font-weight: 500;
	font-size: clamp(48px, 8vw, 112px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Poster-style display — "BREWSCAPE" energy. Condensed, all-caps, tight. */
.t-poster {
	font-family: var(--font-poster);
	font-weight: 400;
	font-size: clamp(56px, 9vw, 128px);
	line-height: 0.86;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

/* Section eyebrow — small, all-caps, tracked */
.t-eyebrow {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--fs-12);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

h1,
.t-h1 {
	font-family: var(--font-display);
	font-variation-settings:
		"opsz" 96,
		"SOFT" 50;
	font-weight: 500;
	font-size: clamp(40px, 5.5vw, 72px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin: 0;
	text-wrap: balance;
}
h2,
.t-h2 {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--fs-32);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0;
}
h3,
.t-h3 {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--fs-20);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
}
h4,
.t-h4 {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--fs-16);
	line-height: 1.3;
	margin: 0;
}

/* Body */
p,
.t-body {
	font-family: var(--font-sans);
	font-size: var(--fs-16);
	line-height: 1.55;
	margin: 0;
	text-wrap: pretty;
}
.t-body-sm {
	font-size: var(--fs-14);
	line-height: 1.5;
}
.t-caption {
	font-size: var(--fs-12);
	line-height: 1.4;
	color: var(--fg-subtle);
	letter-spacing: 0.01em;
}

/* Tagline — italic serif accent, used inside hero copy + receipts */
.t-tagline {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: var(--fs-18);
	line-height: 1.35;
	color: var(--fg-muted);
}

/* Price — always feels confident, sans 600 */
.t-price {
	font-family: var(--font-sans);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* Stamp text — tiny letterspaced caps, curves around badges */
.t-stamp {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--fs-12);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* Mono — receipts, order numbers */
.t-mono {
	font-family: var(--font-mono);
	font-size: var(--fs-13);
}