/* ============================================================
   Surface System v2 — tokens
   The single source of truth for material, depth, corners, motion
   and state across the public site and the operator screens.

   Nothing below paints anything. It only declares the vocabulary
   that surfaces.css, controls.css, data-display.css, motion.css and
   every feature stylesheet consume. Legacy brand tokens from
   theme.css stay authoritative for colour, so white-label builds and
   the Customizer keep working untouched.
   ============================================================ */

:root {
	/* ---- Material ------------------------------------------------
	   Four levels, deliberately few. If something needs a fifth, it
	   probably wants to be one of these four instead. */
	--s-flat: var(--seraj-bg, #f7f5ef);          /* the page itself      */
	--s-raised: var(--seraj-surface, #fff);      /* cards, panels        */
	--s-floating: var(--seraj-surface, #fff);    /* drawers, modals      */
	--s-sunken: color-mix(in srgb, var(--seraj-text, #141413) 3.5%, var(--seraj-surface, #fff));
	--s-tint: color-mix(in srgb, var(--seraj-primary, #2f5d3a) 6%, var(--seraj-surface, #fff));
	--s-tint-strong: color-mix(in srgb, var(--seraj-primary, #2f5d3a) 12%, var(--seraj-surface, #fff));

	/* ---- Edges --------------------------------------------------- */
	--s-hairline: var(--seraj-border, rgba(20, 20, 19, .08));
	--s-line: color-mix(in srgb, var(--seraj-text, #141413) 14%, transparent);
	--s-line-accent: color-mix(in srgb, var(--seraj-primary, #2f5d3a) 30%, var(--s-hairline));

	/* ---- Corners — keyed off the card's 18px --------------------- */
	--s-radius-xs: 8px;
	--s-radius-sm: 12px;
	--s-radius-md: 18px;
	--s-radius-lg: 24px;
	--s-radius-xl: 32px;
	--s-radius-pill: 999px;

	/* Softness multiplier — the admin Design panel writes this. */
	--s-radius-scale: 1;

	/* ---- Depth ---------------------------------------------------
	   Two shadows per level: resting and lifted. Depth multiplier is
	   adjustable from the admin Design panel. */
	--s-depth: 1;
	--s-shadow-raised:
		0 1px 2px rgba(16, 24, 20, calc(.04 * var(--s-depth))),
		0 8px 24px -18px rgba(16, 24, 20, calc(.35 * var(--s-depth)));
	--s-shadow-lifted:
		0 2px 6px rgba(16, 24, 20, calc(.06 * var(--s-depth))),
		0 22px 48px -22px rgba(16, 24, 20, calc(.45 * var(--s-depth)));
	--s-shadow-floating:
		0 4px 12px rgba(16, 24, 20, calc(.08 * var(--s-depth))),
		0 40px 80px -32px rgba(16, 24, 20, calc(.55 * var(--s-depth)));
	--s-shadow-inset: inset 0 1px 2px rgba(16, 24, 20, .05);

	/* ---- Motion — one curve, three speeds ------------------------ */
	--s-ease: cubic-bezier(.22, .61, .36, 1);
	--s-ease-out: cubic-bezier(.16, 1, .3, 1);
	--s-fast: .14s;
	--s-base: .22s;
	--s-slow: .42s;
	--s-lift: -3px;

	/* ---- Focus and states ---------------------------------------- */
	--s-focus: color-mix(in srgb, var(--seraj-primary, #2f5d3a) 55%, transparent);
	--s-focus-ring: 0 0 0 3px var(--s-focus);
	--s-selected-bg: var(--s-tint-strong);
	--s-selected-ink: var(--seraj-primary-ink, #1c3a24);
	--s-disabled-opacity: .55;

	/* ---- Status palette — one meaning, one colour, sitewide ------ */
	--s-ok: #1f7a4d;
	--s-warn: #a8720f;
	--s-danger: #b3261e;
	--s-info: #2b5f8f;
	--s-neutral: var(--seraj-muted, #5c5a55);

	/* ---- Rhythm --------------------------------------------------- */
	--s-gap-xs: .35rem;
	--s-gap-sm: .6rem;
	--s-gap: 1rem;
	--s-gap-lg: 1.5rem;
	--s-pad: clamp(1rem, 1.6vw, 1.35rem);
	--s-pad-lg: clamp(1.25rem, 2.4vw, 2rem);
	--s-section-y: clamp(2.75rem, 6vw, 5.5rem);
	--s-section-y-tight: clamp(1.75rem, 3.5vw, 3rem);
	--s-grid-gap: clamp(1rem, 2vw, 1.6rem);
	--s-measure: 68ch;

	/* ---- Card System v2 now reads from the shared scale ---------- */
	--seraj-card-radius: calc(var(--s-radius-md) * var(--s-radius-scale));
	--seraj-card-shadow: var(--s-shadow-raised);
	--seraj-card-shadow-hover: var(--s-shadow-lifted);
	--seraj-card-ease: var(--s-ease);
	--seraj-card-speed: var(--s-base);
	--seraj-card-border: var(--s-hairline);
	--seraj-card-pad: var(--s-pad);
}

/* Dense mode — operator screens (extranet, manager, PMS) keep the same
   material but tighten the rhythm so more fits on screen. */
.seraj-dense,
.seraj-partner-app,
.seraj-manager-app,
.seraj-pms {
	--s-pad: clamp(.8rem, 1.1vw, 1.05rem);
	--s-pad-lg: clamp(1rem, 1.6vw, 1.35rem);
	--s-section-y: clamp(1.25rem, 2.5vw, 2.25rem);
	--s-grid-gap: clamp(.75rem, 1.2vw, 1.1rem);
	--s-radius-scale: .82;
	--s-lift: -2px;
}

/* Dark bands — any section on a dark background flips the material so
   cards stop glowing white against it. */
.seraj-on-dark {
	--s-flat: #10160f;
	--s-raised: color-mix(in srgb, #fff 7%, #10160f);
	--s-floating: color-mix(in srgb, #fff 10%, #10160f);
	--s-sunken: color-mix(in srgb, #000 22%, #10160f);
	--s-hairline: rgba(255, 255, 255, .14);
	--s-line: rgba(255, 255, 255, .24);
	--seraj-surface: var(--s-raised);
	--seraj-text: #f3f1ea;
	--seraj-muted: rgba(243, 241, 234, .68);
	--seraj-border: var(--s-hairline);
	--seraj-card-bg: var(--s-raised);
	color: var(--seraj-text);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--s-fast: .01ms;
		--s-base: .01ms;
		--s-slow: .01ms;
		--s-lift: 0px;
	}
}