/* =========================================================
   MONA DIGITAL — CSS custom properties
   Palette: dark canvas (DNA) + vivid teal accent (#1BBFBA).
   This file defines the LIGHT-MODE tokens; dark mode overrides in dark-mode.css.
   ========================================================= */

:root {
	/* ===== Light palette (off-white canvas, dark ink type) ===== */
	--bg:            #F7F7F5;   /* near-white off-white */
	--bg-alt:        #EDEDE9;   /* slightly deeper neutral */
	--surface:       #EDEDE9;
	--ink:           #141616;   /* near-black */
	--ink-2:         #2A2D2D;
	--muted:         #5F6463;       /* darker — passes WCAG AA on light bg */
	--muted-2:       #7C8180;       /* darker — passes AA Large on light bg */
	--hairline:      #D8D8D4;

	/* Primary accent: vivid teal pulled from the Mona logo */
	--accent:        #1BBFBA;
	--accent-deep:   #0F8F8A;
	--accent-soft:   #B8E8E6;

	/* Inverse / dark surface — used for inverse blocks (footer, dark-tile cards, stats strip) */
	--forest:        #0C0D0D;       /* near-black inverse surface */
	--forest-mid:    #1A1D1D;       /* slightly lifted inverse surface */
	--forest-soft:   #2A2D2D;       /* hairlines on dark surfaces */

	/* Mustard (rare, for one-off highlights) */
	--ochre:         #C9A84C;

	/* ===== Typography =====
	 * Outfit — geometric grotesque, editorial-confident at display sizes.
	 * JetBrains Mono — captions, labels, timecodes.
	 * Fraunces (italic only) — accent serif for "results", "not found", etc.
	 */
	--font-sans:         'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-display:      'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono:         'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	--font-accent-serif: 'Fraunces', ui-serif, Georgia, serif;

	/* Fluid type scale */
	--step--1: clamp(.82rem,  .78rem + .2vw,  .92rem);
	--step-0:  clamp(1rem,    .95rem + .25vw, 1.125rem);
	--step-1:  clamp(1.18rem, 1.1rem + .5vw,  1.375rem);
	--step-2:  clamp(1.5rem,  1.35rem + .8vw, 1.9rem);
	--step-3:  clamp(2rem,    1.6rem + 1.8vw, 2.9rem);
	--step-4:  clamp(2.6rem,  2rem + 3vw,     4.25rem);
	--step-5:  clamp(3.2rem,  2.3rem + 4.5vw, 6rem);
	--step-6:  clamp(4rem,    2.5rem + 7vw,   8.5rem);

	/* Spacing scale (legacy short names — kept for existing styles) */
	--s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
	--s-5: 1.5rem; --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;
	--s-9: 6rem;   --s-10: 8rem;  --s-11: 10rem;

	/* 8pt grid — use these for any NEW spacing. Maps to the polish-pass spec. */
	--space-1:  0.5rem;   /*  8px */
	--space-2:  1rem;     /* 16px */
	--space-3:  1.5rem;   /* 24px */
	--space-4:  2rem;     /* 32px */
	--space-5:  3rem;     /* 48px */
	--space-6:  4rem;     /* 64px */
	--space-7:  6rem;     /* 96px */
	--space-8:  8rem;     /* 128px */
	--space-9:  10rem;    /* 160px */
	--space-10: 12rem;    /* 192px */

	/* Breakpoint reference values — JS reads these via getComputedStyle for
	   consistent breakpoints across PHP/CSS/JS. CSS @media queries use the
	   raw values (no var() inside @media). */
	--bp-sm:  480px;
	--bp-md:  768px;
	--bp-lg:  1024px;
	--bp-xl:  1280px;
	--bp-2xl: 1440px;

	/* Border weights — 0.5px reads as a true hairline on retina; 1px on standard density */
	--hair: 0.5px;

	/* Shape */
	--radius:    6px;
	--radius-md: 8px;
	--radius-lg: 18px;

	/* Motion */
	--ease: cubic-bezier(.22, .61, .36, 1);
	--dur:  .45s;

	/* Layout */
	--maxw:   1480px;
	--gutter: clamp(1rem, 2.5vw, 2rem);
}