/*
 * Frammer design system — "Studio", taken from the Frammer deck (2026-10).
 *
 * Coral as a full-bleed brand surface, near-black stages with a deep-red glow
 * in one corner, light-grey sheets with soft white cards, and a red keyword
 * device in headlines. DM Sans throughout; the FRAMMER AI wordmark stays an
 * image. Colours were sampled from the deck at full resolution.
 *
 * This file is the single source of truth. Every page reads these tokens —
 * change a value here, not in a page. Older token names are kept where the
 * meaning carried over, so the components re-skinned without new class names.
 */

:root {
	/* Dark stage */
	--fr-black-0: #000000; /* page canvas, nav, footer */
	--fr-black-1: #000000; /* section canvas */
	--fr-black-2: #0b0b10; /* panel on dark */
	--fr-black-3: #15151c; /* raised, hover */
	--fr-navy: #06070c; /* right half of a split section */
	--fr-line: rgba(255, 255, 255, 0.1);
	--fr-line-strong: rgba(255, 255, 255, 0.22);

	/* Type on dark */
	--fr-text-1: #ffffff;
	--fr-text-2: #c3c4cb;
	--fr-text-3: #8e8f98; /* 6.1:1 on black */

	/* Reds — sampled from the deck */
	--fr-coral: #fe595d; /* cover surface, timeline line and dots */
	--fr-tally: #ff1a2e; /* keyword red on dark, live signals (5.4:1 on black) */
	--fr-tally-hover: #ff3b4e; /* the deck's solid key-message bar */
	--fr-tally-deep: #d0101c; /* keyword red on light (4.5:1 on #e8e8e8) */
	--fr-btn: #e0141e; /* every primary button, nav included: the site's red, a touch deeper so white passes AA */
	--fr-btn-hover: #f02430;
	--fr-btn-ink: #ffffff; /* white label on every red button (4.9:1) */
	--fr-tally-ink: #ffffff; /* label on a red live signal */
	--fr-ink-on-coral: #160304; /* text on the coral surface (6.5:1) */

	/* Maroon cards on dark */
	--fr-maroon-top: #22030a;
	--fr-maroon-bottom: #080102;
	--fr-maroon-line: #4a1219;
	--fr-glow-dark: rgba(214, 0, 24, 0.5); /* corner glow on dark */
	--fr-glow-light: rgba(254, 89, 93, 0.5); /* corner glow on light */

	/* Light sheet */
	--fr-paper: #e8e8e8;
	--fr-paper-2: #f6f6f6;
	--fr-paper-line: rgba(0, 0, 0, 0.1);
	--fr-card: #ffffff;
	--fr-ink-1: #111114;
	--fr-ink-2: #55565c; /* 6.2:1 on #e8e8e8 */

	/* Type — DM Sans everywhere, as in the deck */
	--font-display: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
	--font-label: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; /* tracked uppercase eyebrows */
	--display-stretch: 100%;
	--display-weight: 700;
	--display-track: -0.025em;
	--body-stretch: 100%;

	/* Type scale — fluid, phone to desktop */
	--t-hero: clamp(2.75rem, 1.7rem + 4.4vw, 6rem); /* 44px at 375, ~88px at 1440 */
	--t-h1: clamp(2.125rem, 1.45rem + 3vw, 4.25rem);
	--t-h2: clamp(1.75rem, 1.3rem + 1.9vw, 3rem);
	--t-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--t-stat: clamp(3.5rem, 2.2rem + 5.6vw, 7.5rem);
	--t-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--t-body: 1rem;
	--t-small: 0.875rem;
	--t-label: 0.75rem;

	/* Space — one ladder, nothing off it */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 72px;
	--s-9: 112px;
	--section-y: clamp(72px, 9vw, 136px);
	--container: 1240px;
	--gutter: clamp(16px, 4vw, 48px);
	--nav-h: 68px;

	/* Radius */
	--r-frame: 12px; /* video, images, inputs */
	--r-chip: 999px; /* chips and tags */
	--r-panel: 18px; /* maroon cards and panels on dark */
	--r-card: 14px; /* white cards on light */
	--r-pill: 999px; /* every button */

	/* Shadow */
	--shadow-card: 0 12px 32px -12px rgba(17, 17, 20, 0.18);

	/* Motion */
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur-fast: 160ms;
	--dur: 280ms;
	--dur-slow: 640ms;

	/* Depth — 3D scenes are real monitors in a room, never decoration */
	--persp: 1600px;
	--depth-1: 60px;
	--depth-2: 140px;
	--shadow-depth: 0 40px 80px -24px rgba(0, 0, 0, 0.75);

	/* Depth hover (js/depth.js). Static at rest: nothing moves until a fine
	   pointer rests on a card. Then the card turns to face the pointer, lifts,
	   and catches a glare from one light fixed above the screen. */
	--hover-tilt: 11deg;
	--hover-lift: 1.04;
	--hover-inner-shift: 6px; /* labels move this much further than the card, for depth */
	--glare-radius: 1.5; /* the glare's radius, in card diagonals: large and very soft */
	--glare-travel: 0.9; /* how far it slides against the tilt, in card widths/heights */
	--glare-peak: 0.9; /* white at the glare's centre, soft-light blended: lifts a mid tone by ~20% at most, never greys it */
	--glare-floor: 0.05; /* a plain-white copy of the glare, so it still shows over black, where soft-light cannot lift */
	--sheen-peak: 0.07; /* the faint diagonal glass band */

	/* What depth.js writes on a hovered card; the defaults keep every card flat
	   and 2D at rest, so resting cards cost the compositor nothing extra */
	--card-t: translate(0, 0);
	--card-px: 0;
	--card-py: 0;
}