/* ==========================================================================
   FIRST PRO — Design tokens
   Grounded in the official black/white mark. V0.4 adds an ACCENT LIGHT system (three
   proposals, switched by <html data-fp-palette>): the logo stays monochrome; the accent
   drives light, gradients, glows and focus — never the mark itself.
   ========================================================================== */
:root {
	/* Accent light — default "Gold": champagne key light on warm graphite, ivory paper (luxury register) */
	--fp-accent: #d9b36a;
	--fp-accent-2: #f3dca3;
	--fp-accent-ink: #1b1405;   /* text on accent surfaces (≥ 9:1) */
	--fp-accent-text: #7f6126;  /* accent for small text on ivory paper (≥ 4.9:1) */
	--fp-cool: #b7c3d6;         /* silver rim light */
	--fp-void: #0a0908;         /* deepest stage black (warm) */
	--fp-glow: rgba(217, 179, 106, 0.32);
	--fp-glass: rgba(255, 255, 255, 0.045);
	--fp-glass-line: rgba(255, 255, 255, 0.12);
	--fp-gradient-accent: linear-gradient(135deg, #e3c27c 0%, #f6e3b4 55%, #d9b36a 100%);

	/* Colour (mirrors theme.json palette; prefer these in component CSS) */
	--fp-ink: #0d0c0b;
	--fp-graphite: #2a2a2e;
	--fp-slate: #55555b;
	--fp-silver: #6b6b70; /* ≥4.5:1 on paper (WCAG AA small text); was #9a9a9f = 2.7:1 — found by scripts/qa/a11y.mjs */
	--fp-line: #d8d0c2;
	--fp-mist: #ebe4d6;
	--fp-paper: #f6f1e7;
	--fp-white: #fdfbf7;

	/* Semantic (light surface by default; Direction B flips them on .fp-stage) */
	--fp-bg: var(--fp-paper);
	--fp-fg: var(--fp-ink);
	--fp-fg-muted: var(--fp-slate);
	--fp-fg-faint: var(--fp-silver);
	--fp-rule: var(--fp-line);
	--fp-surface: var(--fp-white);
	--fp-surface-2: var(--fp-mist);
	--fp-inverse-bg: var(--fp-ink);
	--fp-inverse-fg: var(--fp-paper);

	/* Type */
	--fp-font-sans: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fp-font-display: "Fraunces", "Georgia", "Times New Roman", serif;
	--fp-font-grotesk: "Space Grotesk", "Inter", system-ui, sans-serif;
	--fp-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--fp-text-xs: 0.8125rem;
	--fp-text-sm: 0.9375rem;
	--fp-text-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--fp-text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	--fp-text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	--fp-text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	--fp-text-3xl: clamp(2.75rem, 1.8rem + 4vw, 5.5rem);
	--fp-text-4xl: clamp(2.9rem, 1.4rem + 5.4vw, 7rem);
	--fp-tracking-tight: -0.035em;
	--fp-tracking-display: -0.02em;
	--fp-leading-tight: 1.02;
	--fp-leading-snug: 1.15;
	--fp-leading-body: 1.6;

	/* Space */
	--fp-space-1: 0.5rem;
	--fp-space-2: 1rem;
	--fp-space-3: 1.5rem;
	--fp-space-4: clamp(2rem, 3vw, 3rem);
	--fp-space-5: clamp(3rem, 5vw, 5rem);
	--fp-space-6: clamp(4.5rem, 8vw, 8rem);
	--fp-space-7: clamp(6rem, 12vw, 12rem);
	--fp-gutter: clamp(1rem, 4vw, 3rem);
	--fp-content: 76rem;
	--fp-wide: 92rem;

	/* Shape */
	--fp-radius-sm: 0.375rem;
	--fp-radius-md: 0.75rem;
	--fp-radius-lg: 1.5rem;
	--fp-radius-pill: 999px;

	/* Motion (CSS micro-interactions; GSAP handles sequences) */
	--fp-dur-fast: 160ms;
	--fp-dur-base: 260ms;
	--fp-dur-slow: 600ms;
	--fp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--fp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* Layers */
	--fp-z-header: 50;
	--fp-z-nav: 60;
	--fp-z-skip: 100;

	/* Focus ring: always visible, colour-independent (2px ring + 3px offset) */
	--fp-focus: 0 0 0 3px var(--fp-bg), 0 0 0 5px var(--fp-fg);
}

/* Arabic typography: Plex Arabic needs a touch more leading and no negative tracking. */
/* Arabic pages: Plex Arabic also carries Latin glyphs, so Inter is NOT requested there (−124 KB). */
[dir="rtl"] {
	--fp-font-sans: "IBM Plex Sans Arabic", system-ui, "Segoe UI", sans-serif;
	--fp-font-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif;
	--fp-tracking-tight: 0;
	--fp-tracking-display: 0;
	--fp-leading-tight: 1.2;
	--fp-leading-snug: 1.3;
	--fp-leading-body: 1.85;
	--fp-text-4xl: clamp(2.5rem, 1.4rem + 5vw, 6.5rem);
	--fp-text-3xl: clamp(2.25rem, 1.6rem + 3.2vw, 4.75rem);
}

/* Dark stage (Direction B and any inverted section) */
.fp-stage,
.fp-inverse {
	--fp-accent-text: var(--fp-accent-2);
	--fp-bg: var(--fp-ink);
	--fp-fg: var(--fp-paper);
	--fp-fg-muted: #c9c9c4;
	--fp-fg-faint: #8d8d90;
	--fp-rule: #2f2f33;
	--fp-surface: #141417;
	--fp-surface-2: #1d1d21;
	--fp-inverse-bg: var(--fp-paper);
	--fp-inverse-fg: var(--fp-ink);
	--fp-focus: 0 0 0 3px var(--fp-bg), 0 0 0 5px var(--fp-fg);
	background: var(--fp-bg);
	color: var(--fp-fg);
}

/* Palette proposals — owner picks one in Settings → FIRST PRO → Accent palette (default: gold) */
:root[data-fp-palette="signal"] { --fp-accent: #ff7a1a; --fp-accent-2: #ffb15c; --fp-accent-ink: #1a0b00; --fp-cool: #7fb3ff; --fp-accent-text: #b64a06; --fp-glow: rgba(255, 122, 26, 0.35); --fp-gradient-accent: linear-gradient(135deg, #ff7a1a 0%, #ffb15c 100%); }
:root[data-fp-palette="aurora"] { --fp-accent: #8b5cf6; --fp-accent-2: #22d3ee; --fp-accent-ink: #0b0618; --fp-cool: #67e8f9; --fp-accent-text: #6d3fd1; --fp-glow: rgba(139, 92, 246, 0.35); --fp-gradient-accent: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%); }
:root[data-fp-palette="oasis"]  { --fp-accent: #14b8a6; --fp-accent-2: #f5c044; --fp-accent-ink: #04120f; --fp-cool: #5eead4; --fp-accent-text: #0f766e; --fp-glow: rgba(20, 184, 166, 0.35); --fp-gradient-accent: linear-gradient(135deg, #14b8a6 0%, #f5c044 100%); }
/* "Mono" — matches the black/white logo exactly: platinum light on ink, neutral paper. Dark surfaces get a white/silver
   primary action; paper surfaces get an ink one (owner feedback 2026-10-16: the palette must agree with the logo). */
:root[data-fp-palette="mono"] { --fp-accent: #ffffff; --fp-accent-2: #e4e6ec; --fp-cool: #aeb6c4; --fp-accent-text: #2a2a2e; --fp-glow: rgba(255, 255, 255, 0.22); --fp-void: #070708; --fp-ink: #0b0b0d; --fp-paper: #f7f7f8; --fp-mist: #ececef; --fp-line: #d9dadf; --fp-white: #ffffff;
	--fp-gradient-accent: linear-gradient(135deg, #202024 0%, #0b0b0d 100%); --fp-accent-ink: #f7f7f8; }
:root[data-fp-palette="mono"] .fp-stage, :root[data-fp-palette="mono"] .fp-inverse, :root[data-fp-palette="mono"] .fp-dir-cinematic .fp-header, :root[data-fp-palette="mono"] .fp-dir-cinematic .fp-footer, :root[data-fp-palette="mono"] .fp-dir-editorial .fp-cta, :root[data-fp-palette="mono"] .fp-svc__cta, :root[data-fp-palette="mono"] .fp-dir-cinematic .fp-builder {
	--fp-gradient-accent: linear-gradient(135deg, #ffffff 0%, #eef0f4 55%, #d3d7de 100%); --fp-accent-ink: #0b0b0d; --fp-accent-text: #e4e6ec; }