/* ==========================================================================
   tokens.css — Single source of truth for the DBC Aquatics brand.
   Dark cinematic "aquarium rescue" palette. Every other file consumes these.
   ========================================================================== */

:root {
	/* ---- Color: deep-ocean rescue palette ---- */
	--c-abyss: #04141b;          /* page background (deepest) */
	--c-deep: #08222e;           /* section background */
	--c-surface: #0c2a38;        /* raised surface */
	--c-surface-2: #103442;      /* hover / elevated */

	--c-aqua: #22d3ee;           /* primary accent / CTA glow */
	--c-aqua-deep: #06b6d4;      /* gradient end / pressed */
	--c-teal: #14b8a6;           /* secondary highlight */
	--c-coral: #fb7185;          /* urgency only (fish dying / toxic) */

	--c-ink: #e8f2f6;            /* primary text */
	--c-muted: #93b0bc;          /* secondary text (>= 4.5:1 on dark) */
	--c-faint: #5b7682;          /* tertiary / meta */

	--c-line: rgba(146, 176, 188, 0.16); /* hairline borders */
	--c-line-strong: rgba(146, 176, 188, 0.28);

	/* Glass surfaces (kept fairly opaque so text always passes contrast) */
	--glass-bg: rgba(12, 34, 46, 0.66);
	--glass-bg-strong: rgba(12, 34, 46, 0.82);
	--glass-blur: 14px;

	/* Gradients */
	--grad-aqua: linear-gradient(135deg, var(--c-aqua) 0%, var(--c-aqua-deep) 100%);
	--grad-deep: linear-gradient(180deg, var(--c-deep) 0%, var(--c-abyss) 100%);
	--grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(34, 211, 238, 0.18) 0%, rgba(4, 20, 27, 0) 70%);

	/* ---- Typography ---- */
	--font-head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fs-base: 1.0625rem;                       /* 17px body */
	--fs-h1: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
	--fs-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
	--fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem);
	--fs-sm: 0.9rem;
	--fs-xs: 0.78rem;

	--lh-body: 1.7;
	--lh-tight: 1.15;
	--measure: 68ch;                            /* readable line length */

	/* ---- Spacing scale ---- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;

	--section-y: clamp(3rem, 7vw, 6rem);        /* vertical section rhythm */

	/* ---- Radius / shadow ---- */
	--radius-sm: 8px;
	--radius: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;

	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
	--shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	--shadow-glow: 0 0 0 1px rgba(34, 211, 238, 0.25), 0 12px 40px rgba(6, 182, 212, 0.25);

	/* ---- Layout ---- */
	--container: 1120px;
	--container-narrow: 760px;
	--container-wide: 1320px;
	--gutter: clamp(1rem, 4vw, 2rem);

	/* ---- Motion ---- */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-fast: 160ms;
	--dur: 240ms;
	--dur-slow: 420ms;

	/* ---- Z-index scale ---- */
	--z-base: 1;
	--z-raised: 10;
	--z-header: 30;
	--z-overlay: 40;
	--z-modal: 50;
}