/*
 * boatcoop-site/static/tokens-boatcoop.css
 * "abyss-glass" preset — mobile-first glassmorphism over a DEEP, SATURATED
 * turquoise-to-abyss gradient. Revision 2026-07-02: the previous "turquoise-
 * glass" preset started the gradient at a near-white #d8f6f2, which reads
 * as flat pale blue on the first screen and gives backdrop-filter nothing
 * to deform (blur on a smooth gradient is invisible by construction). This
 * revision (a) starts saturated and deep from the very first pixel, with
 * only a compact radial surface-light HALO instead of a pale top band, and
 * (b) makes the dark/translucent glass (formerly "--deep", used only on
 * hero/join/footer) the DEFAULT glass material everywhere, since the water
 * behind every panel is now dark. --ink is therefore now the LIGHT ink
 * role; a dark ink role is kept as --ink-inverse for the rare bright
 * surface (used only inside primary buttons/join CTA).
 *
 * Convention: usage semantics only. No physical value in components — every
 * colour, space and size in styles.css goes through var(--…).
 *
 * Contrast (WCAG AA, computed against the actual COMPOSITED background —
 * glass tint alpha-blended over the brightest water stop the panel can sit
 * on, not the flat token alone; formulas: sRGB relative luminance / WCAG
 * contrast ratio):
 *  - --ink            on composited glass over --water-top   ≈ 12.5:1
 *  - --ink-muted       on composited glass over --water-top   ≈  9.4:1
 *  - --ink-faint       on composited glass over --water-top   ≈  6.2:1
 *  - --ink-on-accent   (--ink-inverse) on --accent             ≈  5.0:1
 *  - verdict inks on their own tinted pill (worst case, --verdict-ecartee) ≈ 8.0:1
 */

:root {
	/* -------- Water backdrop (fixed, full-height gradient) --------
	 * Deep and saturated from the first pixel; only a compact radial halo
	 * (see .bc-water::before in styles.css) stands in for a "sunlit surface"
	 * band, instead of an entire pale early stop. */
	--water-top:      #0d6e78; /* deep saturated turquoise, already rich at 0% */
	--water-mid:      #0a4a5c;
	--water-deep:     #072e3c;
	--water-abyss:    #030b10; /* near-black abyss, bottom of page */

	/* -------- Surfaces (opaque fallbacks only: no-JS / no-backdrop-filter) -- */
	--surface:        #082e37;
	--surface-muted:  #0a3742;
	--surface-raised: #ffffff; /* rare bright exception: join CTA button */
	--surface-raised-hover: #dff5f3; /* hover state of the same bright exception */
	--surface-sunken: #051c22;

	/* -------- Glass material --------
	 * Blur kept in the 8-14px band per audited guidance (perf on mobile).
	 * Dark/translucent glass is now the DEFAULT (--glass-bg-deep is what
	 * .bc-glass itself uses); --glass-bg-light is kept only for the rare
	 * bright-surface exception, currently unused by any shipped panel. */
	--glass-blur:       12px;
	--glass-saturate:   160%;
	--glass-bg-deep:    rgba(3, 16, 21, 0.58);
	--glass-bg-light:   rgba(255, 255, 255, 0.62);
	--glass-border:     rgba(255, 255, 255, 0.16);
	--glass-border-deep: rgba(255, 255, 255, 0.16);
	--glass-specular:   rgba(255, 255, 255, 0.55); /* top-edge highlight streak */
	--glass-glow:       rgba(120, 230, 224, 0.14); /* faint inner glow, top of panel */

	/* -------- Ink -------- */
	--ink:            #eaf8f6; /* light ink — DEFAULT, used on the now-dark glass */
	--ink-muted:      #b9dedd;
	--ink-faint:      #86b9b8;
	--ink-inverse:    #0b2e33; /* dark ink — exception, rare bright surface only */
	--ink-on-accent:  #052835;
	--ink-on-water:   #eaf8f6; /* kept as alias: same role as --ink now */
	--ink-on-water-muted: #b9dedd;

	/* -------- Accent (marine coral/teal pop, sparing use) --------
	 * --accent is tuned for use ON the dark glass (links, pill backgrounds
	 * paired with --ink-on-accent) — contrast on composited dark glass
	 * ≈ 5.2:1, on --ink-on-accent as bg ≈ 5.9:1. --accent-on-light is a
	 * separate, darker token for the one remaining bright surface (the
	 * join panel's white CTA button) — mixing the two roles under one
	 * token was the wrong call: --accent bright enough for dark glass is
	 * NOT dark enough for AA text on white. */
	--accent:          #1cb0ba;
	--accent-hover:    #4dd0d6;
	--accent-on-light: #0b6672;

	/* -------- States / verdicts (tinted pills tuned for a dark composited
	 * background: opaque-enough tint + light ink, not the former dark-ink-
	 * on-pale-tint pairing) -------- */
	--verdict-ecartee-bg:   rgba(214, 92, 72, 0.28);
	--verdict-ecartee-ink:  #ffd7cc;
	--verdict-retenue-bg:   rgba(46, 196, 158, 0.26);
	--verdict-retenue-ink:  #c9fbe8;
	--verdict-discuter-bg:  rgba(214, 168, 60, 0.28);
	--verdict-discuter-ink: #ffe9b0;

	--success:        #7fe8cf;
	--warning:        #ffdb94;
	--danger:         #ffb3a1;
	--info:           #82dee2;

	/* -------- Borders (light-based hairlines: legible on the now-dark glass) */
	--border:         rgba(234, 248, 246, 0.14);
	--border-strong:  rgba(234, 248, 246, 0.30);
	--border-focus:   var(--accent);

	/* -------- Radius (generous, glass reads soft) -------- */
	--radius-sm:      6px;
	--radius-md:      12px;
	--radius-lg:      20px;
	--radius-pill:    9999px;

	/* -------- Spacing (4px base) -------- */
	--space-xs:       4px;
	--space-sm:       8px;
	--space-md:       12px;
	--space-lg:       16px;
	--space-xl:       24px;
	--space-2xl:      32px;
	--space-3xl:      48px;
	--space-4xl:      72px;

	/* -------- Typography -------- */
	/* system-ui stack only — zero external font fetch, works offline. */
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--font-size-xs:   13px;
	--font-size-sm:   14.5px;
	--font-size-md:   16.5px;
	--font-size-lg:   20px;
	--font-size-xl:   25px;
	--font-size-2xl:  31px;
	--font-size-3xl:  40px;
	--line-height:    1.6;

	/* -------- Elevation --------
	 * --shadow-glow is a second, colored (abyssal teal) drop shadow layered
	 * under panels, deliberately not grey — a grey shadow reads muddy
	 * against the turquoise-to-abyss water, a teal-black one reads as
	 * "sinking into deep water". Always paired with --shadow-md/lg, never
	 * alone. */
	--shadow-sm:      0 1px 3px rgba(5, 40, 53, 0.14);
	--shadow-md:      0 6px 20px rgba(5, 40, 53, 0.18);
	--shadow-lg:      0 16px 40px rgba(5, 40, 53, 0.28);
	--shadow-glow:    0 18px 46px rgba(2, 12, 16, 0.55);

	/* -------- Layout constants -------- */
	--container-max:  760px;
	--measure:        62ch;

	/* -------- Z layers -------- */
	--z-water:        0;
	--z-caustics:     1;
	--z-particles:    2;
	--z-fish:         3;
	--z-content:      10;
	--z-overlay:      100;
}

::selection {
	background: var(--accent);
	color: var(--ink-on-accent);
}