/**
 * Design tokens — Al Meh-Rab theme.
 *
 * Structural rhythm (spacing, radius, motion, type scale) follows a proven
 * pill-header, section-rhythm layout system; the palette and type pairing
 * are entirely new — a premium black + metallic gold B2B trading identity.
 * Every other
 * stylesheet reads these variables rather than hardcoding values — see
 * base.css and components.css.
 */

:root {
	/* Colour — brand */
	--color-gold: #D4A72C;
	--color-gold-light: #F5D76E;
	--color-gold-dark: #A9821F;
	--color-dark: #101113;
	--color-dark-soft: #18191B;
	--color-paper: #F7F7F5;
	--color-white: #FFFFFF;

	/* Colour — functional, derived from the brand set above */
	--color-ink: #101113;
	--color-ink-soft: #4B4C4F;
	--color-surface: #FFFFFF;
	--color-wash: #F7F7F5;
	--color-border: #E4E2DC;
	--color-muted: #83837E;
	--color-ok: #3F7D5C;
	--color-error: #B3412C;

	/* Typography */
	--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

	/* Base body copy size: 18px desktop, 16px tablet & mobile (overridden in
	   base.css at the same 860px breakpoint the rest of the theme uses). */
	--text-xs: 0.8125rem;
	--text-sm: 0.9375rem;
	--text-base: 1.125rem;
	--text-lg: 1.125rem;
	--text-xl: 1.375rem;
	--text-2xl: 1.75rem;
	--text-3xl: 2.25rem;
	--text-4xl: 3rem;

	/* Layout */
	--container-width: 1240px;
	--container-padding: 24px;
	--section-spacing: 112px;
	--section-spacing-mobile: 56px;

	/* Radius & shadow — deliberately restrained: sharper corners than a
	   typical SaaS template, no oversized rounded cards, so the site reads
	   as corporate/premium rather than app-like. */
	--radius-card: 10px;
	--radius-pill: 999px;
	--radius-input: 8px;
	--shadow-card: 0 12px 32px -18px rgba(16, 17, 19, 0.35);
	--shadow-header: 0 10px 30px -18px rgba(16, 17, 19, 0.4);
	--shadow-header-stuck: 0 4px 20px -10px rgba(16, 17, 19, 0.25);

	/* Gold gradients — used sparingly as accents (badges, dividers, one CTA
	   band), never as a full-bleed background. */
	--gradient-gold: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
	--gradient-gold-subtle: linear-gradient(180deg, rgba(212, 167, 44, 0.14) 0%, rgba(212, 167, 44, 0) 100%);

	/* Motion */
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-fast: 150ms;
	--duration-base: 260ms;
}