/* File: public/css/base/_variables.css */

/*
 * THE CORE TOKENS — change these to re-skin a copy-cat site:
 *   --brand-bg          page background, the site's identity (light surface)
 *   --brand-ink         dark text + sidebars + popups + form bg
 *   --brand-accent      bright accent for hover / headings / light overlays
 *   --brand-accent-deep dark accent for links + shadows + gradient ends
 *   --brand-highlight   warm secondary accent — achievements / CF-points / emphasis (use sparingly)
 *
 * Plus three semantic states (rarely changed): success, alert, error.
 *
 * Everything else derives. Never hardcode a colour in a downstream variable
 * (e.g. `--banner-bg-hover: #3b3b3b` is forbidden — derive instead).
 *
 * Channel-companion tokens (`--brand-*-rgb`) hold the same colour as their
 * parent expressed as `r, g, b` so that `rgba(var(--brand-*-rgb), alpha)` works.
 * If you change a core colour, change BOTH its hex AND its `-rgb` channel.
 */

:root {
	/* ============================================================
	   CORE — site identity (5 cores + 3 semantic states)
	   ============================================================ */
	--brand-bg: #FAF4E8;
	--brand-ink: #15272E;
	--brand-accent: #2E8C9E;
	--brand-accent-deep: #14525F;
	--brand-highlight: #BE8A3C;

	--brand-ink-rgb: 21, 39, 46;
	--brand-accent-rgb: 46, 140, 158;
	--brand-accent-deep-rgb: 20, 82, 95;
	--brand-highlight-rgb: 190, 138, 60;

	--brand-success: #4BB543;
	--brand-success-rgb: 75, 181, 67;
	--brand-alert: #D9512C;
	--brand-error: red;

	/* ============================================================
	   SURFACES (derived)
	   ============================================================ */
	/* Light surfaces — derive from --brand-bg */
	--body-bg: var(--brand-bg);
	--header-bg: var(--brand-bg);
	--block-bg: var(--brand-bg);
	--main-menu-bg: var(--brand-bg);

	/* Dark/inverted surfaces — derive from --brand-ink */
	--sidebar-bg: var(--brand-ink);
	--form-bg: var(--brand-ink);
	--panel-bg: var(--brand-ink);
	--popup-bg: var(--brand-ink);
	--banner-bg: var(--brand-ink);
	--banner-bg-hover: var(--brand-accent-deep);
	--divider-color: rgba(var(--brand-ink-rgb), 0.2);   /* sia step-2.5: was solid petrol ink — soft hairline on cream */

	/* Modal shroud */
	--modal-bg: rgba(0, 0, 0, 0.5);

	/* ============================================================
	   TEXT COLOURS (derived)
	   ============================================================ */
	--main-text-color: var(--brand-ink);
	--text-color: var(--brand-ink);
	--inverted-text-color: var(--brand-bg);
	--text-muted: rgba(var(--brand-ink-rgb), 0.55);

	--action-color: var(--brand-ink);
	--inverted-action-color: var(--brand-bg);

	--link-color: var(--brand-accent-deep);
	--link-color-hover: var(--brand-accent);
	--link-hover-color: var(--brand-accent);

	--error-color: var(--brand-error);
	--alert-color: var(--brand-alert);
	--success-color: var(--brand-success);
	--req-color: var(--brand-alert);

	/* Highlight (warm secondary) — achievements / CF-points / emphasis. Use
	   sparingly; this is the one warm note in an otherwise cool palette. */
	--highlight-color: var(--brand-highlight);
	--highlight-bg-soft: rgba(var(--brand-highlight-rgb), 0.12);
	--highlight-bg-medium: rgba(var(--brand-highlight-rgb), 0.18);
	--highlight-border-soft: rgba(var(--brand-highlight-rgb), 0.28);

	/* ============================================================
	   TABS / MENU / ACTIONS (derive from accent family)
	   ============================================================ */
	--inactive-tab-bg: var(--brand-accent-deep);
	--active-tab-bg: rgba(var(--brand-accent-rgb), 0.5);
	--active-tab-color: var(--brand-ink);
	--inverted-active-tab-color: var(--brand-bg);
	--tab-text-color: var(--brand-ink);

	--menu-hover-bg: var(--brand-accent);
	--menu-active-bg: rgba(var(--brand-accent-rgb), 0.7);
	--action-bg-hover: var(--brand-accent);

	/* ============================================================
	   BORDERS / DIVIDERS
	   ============================================================ */
	--input-border-color: var(--brand-ink);
	--focus-input-border-color: var(--brand-ink);
	--inverted-input-border-color: var(--brand-bg);
	--focus-inverted-input-border-color: var(--brand-bg);
	--inverted-focus-input-border-color: var(--brand-bg);
	--inverted-divider-color: var(--brand-bg);

	/* ============================================================
	   FONT WEIGHTS (Inter ships these 8)
	   ============================================================ */
	--font-weight-light: 200;
	--font-weight-semilight: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	--font-weight-black: 900;

	/* ============================================================
	   FONT SIZE SCALE (6 steps)
	   ============================================================ */
	--font-size-xs: 0.85rem;
	--font-size-sm: 0.92rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.1rem;
	--font-size-xl: 1.4rem;
	--font-size-2xl: 1.8rem;

	/* ============================================================
	   RADIUS (3 steps + component aliases)
	   ============================================================ */
	--brand-radius: 12px;   /* sia step-2.5: 20px → 12px — crisper/clinical (every surface alias derives from this; pill stays separate) */
	--brand-radius-sm: 8px;
	--brand-radius-pill: 999px;

	--shared-radius: var(--brand-radius);
	--input-radius: var(--brand-radius);
	--button-radius: var(--brand-radius);
	--popup-radius: var(--brand-radius);
	--form-radius: var(--brand-radius);
	--panel-radius: var(--brand-radius);
	--tab-radius: var(--brand-radius);

	/* ============================================================
	   SPACING / LAYOUT (no full scale yet — only the values used)
	   ============================================================ */
	--header-height: 5.5rem;
	--modal-offset: calc(var(--header-height) + 1rem);
	--section-gap: 1.5rem;

	--space-sm: 0.6rem;
	--space-md: 1rem;
	--row-padding-x-md: 1.25rem;
	--row-padding-y-md: 1rem;
	--control-height-sm: 2.5rem;
	--control-height-md: 2.8rem;
	--select-height-md: 3.1rem;

	--content-left-left-padding: 0.5rem;
	--content-left-right-padding: 1rem;
	--content-right-left-padding: 1rem;
	--content-right-right-padding: 0.7rem;

	/* ============================================================
	   TRANSITIONS / ANIMATION
	   ============================================================ */
	--transition-fast: 150ms;
	--transition-medium: 300ms;
	--transition-slow: 600ms;
	--easing-standard: ease-in-out;
	--default-animation: animatezoom 0.5s;

	/* ============================================================
	   Z-INDEX SCALE (7 layers — no more raw 9999/10000)
	   ============================================================ */
	--z-base: 0;
	--z-sticky: 1;
	--z-dropdown: 10;
	--z-header: 12;
	--z-popup: 20;
	--z-modal: 30;
	--z-lightbox: 9999;

	/* ============================================================
	   INK OVERLAYS — translucent dark for borders/backgrounds (4 steps)
	   ============================================================ */
	--ink-overlay-faint: rgba(var(--brand-ink-rgb), 0.06);
	--ink-overlay-soft: rgba(var(--brand-ink-rgb), 0.10);
	--ink-overlay-medium: rgba(var(--brand-ink-rgb), 0.16);
	--ink-overlay-strong: rgba(var(--brand-ink-rgb), 0.28);

	--border-neutral: var(--ink-overlay-soft);
	--border-neutral-strong: var(--ink-overlay-strong);

	/* ============================================================
	   GLASS SURFACES — translucent white panels (3 steps)
	   ============================================================ */
	--surface-glass-soft: rgba(255, 255, 255, 0.45);
	--surface-glass: rgba(255, 255, 255, 0.62);
	--surface-glass-strong: rgba(255, 255, 255, 0.85);
	--surface-solid-white: #fff;
	--surface-white-alpha-25: rgba(255, 255, 255, 0.25);
	--surface-white-alpha-90: rgba(255, 255, 255, 0.9);

	/* ============================================================
	   ACCENT OVERLAYS (derived from --brand-accent / -deep)
	   ============================================================ */
	--accent-bg-subtle: rgba(var(--brand-accent-rgb), 0.10);
	--accent-bg-soft: rgba(var(--brand-accent-rgb), 0.12);
	--accent-bg-medium: rgba(var(--brand-accent-rgb), 0.16);
	--accent-border-soft: rgba(var(--brand-accent-rgb), 0.18);
	--accent-fill-soft-start: rgba(var(--brand-accent-rgb), 0.34);
	--accent-fill-soft-end: rgba(var(--brand-accent-rgb), 0.16);
	--accent-fill-strong-start: rgba(var(--brand-accent-rgb), 0.78);
	--accent-fill-strong-end: rgba(var(--brand-accent-deep-rgb), 0.82);
	--accent-gradient: linear-gradient(90deg, var(--accent-fill-strong-start), var(--accent-fill-strong-end));
	--accent-gradient-soft: linear-gradient(90deg, var(--accent-fill-soft-start), var(--accent-fill-soft-end));

	/* Neutral fill backgrounds — semantic alias of ink overlays for surface usage */
	--neutral-bg-soft: var(--ink-overlay-faint);

	/* Info — same hue family as accent, lower saturation */
	--info-bg-soft: rgba(var(--brand-accent-rgb), 0.12);
	--info-border-soft: rgba(var(--brand-accent-rgb), 0.18);

	/* ============================================================
	   SUCCESS OVERLAYS (1 base + 3 alphas + 1 gradient + 1 border)
	   ============================================================ */
	--success-bg-soft: rgba(var(--brand-success-rgb), 0.10);
	--success-bg-medium: rgba(var(--brand-success-rgb), 0.16);
	--success-bg-strong: rgba(var(--brand-success-rgb), 0.30);
	--success-border-soft: rgba(var(--brand-success-rgb), 0.22);
	--success-gradient: linear-gradient(90deg, var(--success-fill-strong-start), var(--success-fill-strong-end));
	--success-gradient-soft: linear-gradient(90deg, var(--success-fill-soft-start), var(--success-bg-soft));

	/* Gradient building blocks (kept so component-side compositions can mix endpoints) */
	--success-fill-soft-start: rgba(var(--brand-success-rgb), 0.32);
	--success-fill-soft-end: rgba(var(--brand-success-rgb), 0.10);
	--success-fill-strong-start: rgba(var(--brand-success-rgb), 0.82);
	--success-fill-strong-end: rgba(var(--brand-success-rgb), 0.92);

	/* ============================================================
	   DANGER / MEDAL surfaces (small, kept literal — not core palette)
	   ============================================================ */
	--danger-bg-soft: rgba(255, 244, 244, 0.92);
	--danger-bg-hover: #fff0f0;
	--danger-border-soft: var(--ink-overlay-soft);

	--medal-gold-bg: rgba(255, 240, 196, 0.88);
	--medal-silver-bg: rgba(236, 239, 243, 0.88);
	--medal-bronze-bg: rgba(230, 210, 191, 0.88);

	/* ============================================================
	   SHADOWS (3 levels accent-tinted + 1 success + form/input)
	   ============================================================ */
	--shadow-soft: 0 6px 18px rgba(var(--brand-accent-deep-rgb), 0.06);
	--shadow-medium: 0 10px 24px rgba(var(--brand-accent-deep-rgb), 0.10);
	--shadow-strong: 0 16px 36px rgba(var(--brand-accent-deep-rgb), 0.14);
	--shadow-success: 0 8px 20px rgba(var(--brand-success-rgb), 0.08);

	/* form/input/panel shadow — used by many components, semantic alias.
	   sia step-2.5: was a strong accent-tinted glow (accent-deep 0.33 + 4px
	   spread halo); flattened to a subtle neutral-ink drop for a cleaner,
	   more clinical surface (the input/panel borders carry the definition). */
	--box-shadow-color: rgba(var(--brand-ink-rgb), 0.1);
	--form-shadow: 0 2px 8px 0 var(--box-shadow-color);
	--panel-shadow: var(--form-shadow);
	--input-shadow: var(--form-shadow);

	/* inverted (dark surface) shadows */
	--inverted-box-shadow: rgba(var(--brand-accent-deep-rgb), 0.15);
	--inverted-input-shadow: 0 4px 7px 0 var(--inverted-box-shadow);
	--inverted-form-shadow: 0 4px 10px 4px var(--inverted-box-shadow);
	--inverted-panel-shadow: var(--inverted-form-shadow);

	/* ============================================================
	   BANNER (component-specific — kept together for ergonomic editing)
	   ============================================================ */
	--banner-text-color: var(--brand-bg);
	--banner-border-color: var(--brand-bg);
	--banner-outline-color: currentColor;

	--banner-radius: var(--brand-radius-pill);
	--banner-mobile-radius: var(--brand-radius);
	--banner-padding-y: 0.95rem;
	--banner-mobile-padding-y: 0.8rem;
	--banner-margin-bottom: 2rem;
	--banner-home-margin-bottom: 2.25rem;

	--banner-font-size: 0.98rem;
	--banner-font-size-mobile: 0.9rem;
	--banner-font-weight: var(--font-weight-bold);
	--banner-letter-spacing: 0.02em;

	--banner-item-gap: 2rem;
	--banner-item-gap-mobile: 1.25rem;
	--banner-separator-font-size: 1rem;

	--banner-shadow: var(--form-shadow);
	--banner-hover-shadow: var(--shadow-strong);
	--banner-hover-translate-y: -1px;
	--banner-outline-width: 2px;
	--banner-outline-offset: 3px;

	--banner-speed-slow: 100s;
	--banner-speed-normal: 50s;
	--banner-speed-fast: 30s;
}

/* ============================================================
   NIGHT MODE (sia G3, 2026-06-10) — the dark token layer.

   `html[data-theme="dark"]` is set server-side by Layout::renderPageStart
   (NightMode: cookie `sia_night_mode` on/off, absent = auto 22:00→06:00)
   and flipped live by the header toggle (components/nightMode.js).

   Strategy: redefine the 5 cores (+ their -rgb channels) so the whole
   derived layer inverts for free — bg goes dark, ink goes light, accents
   lighten for dark-bg contrast — then RE-PIN the tokens whose derivation
   assumed "ink = dark": the dark surfaces (forms/popups/panels stay DARK,
   slightly lighter than the page — a dark popup on a dark page, not a
   blinding cream card), the white/glass literals, the accent-deep
   consumers that must stay dark fills (inactive tabs, banner hover), and
   the shadows (a light-ink shadow would glow).
   ============================================================ */
html[data-theme="dark"] {
	color-scheme: dark;

	/* Cores — inverted/lightened. Night ink = the day-mode CREAM (#FAF4E8),
	   not an invented light grey: day mode already pairs cream text on petrol
	   surfaces (forms/popups), so cream-on-dark IS the brand inversion. */
	--brand-bg: #101C22;
	--brand-ink: #FAF4E8;
	--brand-accent: #4FB3C5;
	--brand-accent-deep: #7FCBD8;   /* "deep" flips LIGHTER — its main role here is link colour on the dark bg */
	--brand-highlight: #D4A45C;

	--brand-ink-rgb: 250, 244, 232;
	--brand-accent-rgb: 79, 179, 197;
	--brand-accent-deep-rgb: 127, 203, 216;
	--brand-highlight-rgb: 212, 164, 92;

	/* Dark surfaces stay dark (one step lighter than the page) */
	--sidebar-bg: #182830;
	--form-bg: #182830;
	--panel-bg: #182830;
	--popup-bg: #182830;
	--banner-bg: #182830;
	--banner-bg-hover: #1F4750;

	/* Text on dark surfaces = the (now light) ink */
	--inverted-text-color: var(--brand-ink);
	--inverted-action-color: var(--brand-ink);
	--inverted-active-tab-color: var(--brand-ink);
	--banner-text-color: var(--brand-ink);
	--banner-border-color: var(--brand-ink);

	/* Inverted borders/dividers (derived from bg in day mode → re-pin light) */
	--inverted-input-border-color: var(--brand-ink);
	--focus-inverted-input-border-color: var(--brand-ink);
	--inverted-focus-input-border-color: var(--brand-ink);
	--inverted-divider-color: rgba(var(--brand-ink-rgb), 0.4);

	/* Tabs / menu — accent fills toned down so light text stays readable */
	--inactive-tab-bg: #173E47;
	--active-tab-bg: rgba(var(--brand-accent-rgb), 0.28);
	--menu-hover-bg: rgba(var(--brand-accent-rgb), 0.22);
	--menu-active-bg: rgba(var(--brand-accent-rgb), 0.3);
	--action-bg-hover: rgba(var(--brand-accent-rgb), 0.22);

	/* White / glass literals → dark equivalents */
	--surface-glass-soft: rgba(24, 40, 48, 0.45);
	--surface-glass: rgba(24, 40, 48, 0.62);
	--surface-glass-strong: rgba(24, 40, 48, 0.85);
	--surface-solid-white: #182830;
	--surface-white-alpha-25: rgba(255, 255, 255, 0.06);
	--surface-white-alpha-90: rgba(24, 40, 48, 0.9);

	/* Danger / medal literal light surfaces → muted dark tints */
	--danger-bg-soft: rgba(70, 24, 24, 0.55);
	--danger-bg-hover: rgba(88, 28, 28, 0.65);
	--medal-gold-bg: rgba(122, 96, 32, 0.4);
	--medal-silver-bg: rgba(116, 124, 134, 0.32);
	--medal-bronze-bg: rgba(112, 80, 54, 0.4);

	/* Shadows — ink-rgb is light now, so the derived shadows would glow */
	--box-shadow-color: rgba(0, 0, 0, 0.45);
	--shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.35);
	--shadow-medium: 0 10px 24px rgba(0, 0, 0, 0.4);
	--shadow-strong: 0 16px 36px rgba(0, 0, 0, 0.5);
	--inverted-box-shadow: rgba(0, 0, 0, 0.45);

	--modal-bg: rgba(0, 0, 0, 0.65);
}