/*
 * Atrium — tokens.css
 *
 * Scope: the design-token layer shared by the front end (handle `atrium-tokens`) and the block editor.
 *   1. Fallback values for every token the PHP engine prints inline after this file (inc/tokens.php →
 *      atrium_tokens_css()). Values are the Estate preset, computed with the SPEC §17.1 algorithm, so the
 *      site renders correctly even if the inline block is missing.
 *   2. CSS-derived tokens (type scale, spacing, radii, motion) built on top of those values.
 *   3. Context re-maps: dark bands, text over photos, brand-colored areas and the light "restore" context.
 *      Every component reads tokens, so it adapts to these contexts without extra rules.
 *
 * No selectors here style components; see base.css.
 */

/* -------------------------------------------------------------------------
 * 1. Fallbacks for PHP-output tokens (Estate)
 * ---------------------------------------------------------------------- */

:root {
	color-scheme: light;

	/* Customizer colors */
	--atr-color-bg: #faf8f4;
	--atr-color-surface: #f2eee7;
	--atr-color-text: #1c1f23;
	--atr-color-muted: #5f6670;
	--atr-color-border: #e3ddd3;
	--atr-color-primary: #1f3a5f;
	--atr-color-accent: #a8875a;
	--atr-color-dark: #14202e;

	/* Typography */
	--atr-font-heading: "Cormorant Garamond", Georgia, serif;
	--atr-font-body: Manrope, system-ui, sans-serif;
	--atr-font-accent: Manrope, system-ui, sans-serif;
	--atr-font-size-base: calc(17 / 16 * 1rem);
	--atr-type-scale: 1.25;
	--atr-line-height: 1.7;
	--atr-heading-line-height: 1.1;
	--atr-heading-tracking: -0.01em;
	--atr-heading-transform: none;
	--atr-nav-transform: uppercase;
	--atr-label-tracking: 0.18em;

	/* Layout & spacing */
	--atr-container: 1280px;
	--atr-content: 740px;
	--atr-space-unit: 1;
	--atr-section-space: clamp(5rem, 10vw, 8.5rem);

	/* Corners, buttons & cards */
	--atr-radius: 2px;
	--atr-radius-button: var(--atr-radius);
	--atr-radius-image: var(--atr-radius);
	--atr-shadow: 0 1px 2px var(--atr-shadow-color), 0 12px 32px -12px var(--atr-shadow-color);
	--atr-button-transform: uppercase;
	--atr-button-tracking: 0.14em;

	/* Header, listings & homepage */
	--atr-logo-height: 44px;
	--atr-card-ratio: 3/2;
	--atr-archive-cols: 3;
	--atr-hero-height: 84vh;
	--atr-hero-overlay: calc(35 / 100);

	/* Derived by the engine (SPEC §17.1) */
	--atr-scheme: light;
	--atr-color-accent-soft: #efe8de;
	--atr-color-primary-ink: #1f3a5f;
	--atr-color-accent-ink: #7e6544;
	--atr-color-muted-ink: #5f6670;
	--atr-color-focus: #1f3a5f;
	--atr-color-field-border: #88857f;
	--atr-color-on-primary: #ffffff;
	--atr-color-primary-hover: #1a3151;
	--atr-color-accent-fill: #a8875a;
	--atr-color-on-accent: #14171a;
	--atr-color-band: #14202e;
	--atr-color-on-dark: #ffffff;
	--atr-color-surface-dark: #222d3b;
	--atr-color-border-dark: #3e4854;
	--atr-color-muted-ink-dark: #bdc1c4;
	--atr-color-accent-ink-dark: #b1936b;
	--atr-color-focus-dark: #a8875a;
	--atr-color-btn-on-dark: #a8875a;
	--atr-color-btn-on-dark-text: #14171a;
	--atr-color-success: #2d774b;
	--atr-color-warning: #926119;
	--atr-color-danger: #b42318;
	--atr-shadow-color: color-mix(in srgb, #14202e 16%, transparent);
	--atr-badge-for-sale-bg: #1f3a5f;
	--atr-badge-for-sale-fg: #ffffff;
	--atr-badge-for-rent-bg: #14202e;
	--atr-badge-for-rent-fg: #ffffff;
	--atr-badge-coming-soon-bg: #a8875a;
	--atr-badge-coming-soon-fg: #14171a;
	--atr-badge-pending-bg: #e8dfd2;
	--atr-badge-pending-fg: #1c1f23;
	--atr-badge-sold-bg: #1c1f23;
	--atr-badge-sold-fg: #faf8f4;
	--atr-heading-weight: 500;
	--atr-body-weight: 400;
	--atr-body-strong: 600;
	--atr-weight-medium: 500;
	--atr-weight-strong: 600;
	--atr-heading-caps-boost: 0em;
	--atr-button-caps-boost: .06em;
	--atr-nav-caps-boost: .06em;
	--atr-control-h: 3rem;
	--atr-header-h: 84px;
}

/* -------------------------------------------------------------------------
 * 2. CSS-derived tokens (context independent)
 * ---------------------------------------------------------------------- */

:root {
	/* Page colors captured at the root, used to restore them inside other contexts (.atr-light). */
	--atr-root-bg: var(--atr-color-bg);
	--atr-root-surface: var(--atr-color-surface);
	--atr-root-text: var(--atr-color-text);
	--atr-root-muted: var(--atr-color-muted);
	--atr-root-muted-ink: var(--atr-color-muted-ink);
	--atr-root-border: var(--atr-color-border);
	--atr-root-field-border: var(--atr-color-field-border);
	--atr-root-primary: var(--atr-color-primary);
	--atr-root-on-primary: var(--atr-color-on-primary);
	--atr-root-primary-hover: var(--atr-color-primary-hover);
	--atr-root-primary-ink: var(--atr-color-primary-ink);
	--atr-root-accent-ink: var(--atr-color-accent-ink);
	--atr-root-accent-soft: var(--atr-color-accent-soft);
	--atr-root-focus: var(--atr-color-focus);
	--atr-root-success: var(--atr-color-success);
	--atr-root-warning: var(--atr-color-warning);
	--atr-root-danger: var(--atr-color-danger);

	/* Type scale: base × scale^n. Small steps never drop below legible sizes. */
	--atr-step-0: var(--atr-font-size-base);
	--atr-step-1: calc(var(--atr-step-0) * var(--atr-type-scale));
	--atr-step-2: calc(var(--atr-step-1) * var(--atr-type-scale));
	--atr-step-3: calc(var(--atr-step-2) * var(--atr-type-scale));
	--atr-step-4: calc(var(--atr-step-3) * var(--atr-type-scale));
	--atr-step-5: calc(var(--atr-step-4) * var(--atr-type-scale));
	--atr-step-6: calc(var(--atr-step-5) * var(--atr-type-scale));
	--atr-step--1: max(0.8125rem, calc(var(--atr-step-0) / var(--atr-type-scale)));
	--atr-step--2: max(0.75rem, calc(var(--atr-step-0) / var(--atr-type-scale) / var(--atr-type-scale)));

	/* Fluid heading sizes */
	--atr-h1: clamp(var(--atr-step-3), 1rem + 4.5vw, min(var(--atr-step-6), 6.5rem));
	--atr-h2: clamp(var(--atr-step-2), 0.75rem + 3vw, min(var(--atr-step-5), 4.5rem));
	--atr-h3: clamp(var(--atr-step-1), 0.5rem + 2vw, var(--atr-step-3));
	--atr-h4: clamp(var(--atr-step-1), 0.75rem + 1vw, var(--atr-step-2));
	--atr-h5: var(--atr-step-1);
	--atr-h6: var(--atr-step-0);
	--atr-display: clamp(var(--atr-step-4), 1rem + 6vw, min(calc(var(--atr-step-6) * 1.2), 7.5rem));

	--atr-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	/* Spacing scale (× density) */
	--atr-space-1: calc(0.25rem * var(--atr-space-unit));
	--atr-space-2: calc(0.5rem * var(--atr-space-unit));
	--atr-space-3: calc(0.75rem * var(--atr-space-unit));
	--atr-space-4: calc(1rem * var(--atr-space-unit));
	--atr-space-5: calc(1.5rem * var(--atr-space-unit));
	--atr-space-6: calc(2rem * var(--atr-space-unit));
	--atr-space-7: calc(3rem * var(--atr-space-unit));
	--atr-space-8: calc(4rem * var(--atr-space-unit));
	--atr-space-9: calc(6rem * var(--atr-space-unit));
	--atr-space-10: calc(8rem * var(--atr-space-unit));
	--atr-gutter: clamp(1rem, 4vw, 2.5rem);

	/* Radii */
	--atr-radius-sm: calc(var(--atr-radius) * 0.5);
	--atr-radius-lg: min(calc(var(--atr-radius) * 1.5), 40px);
	--atr-radius-input: min(var(--atr-radius), 12px);
	--atr-inset: max(var(--atr-space-3), calc(var(--atr-radius) * 0.4));

	/* Motion */
	--atr-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--atr-duration: 0.3s;
	--atr-transition: 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);

	/* Layering */
	--atr-z-raised: 2;
	--atr-z-sticky: 50;
	--atr-z-header: 100;
	--atr-z-overlay: 1000;
	--atr-z-toast: 1100;

	/* Fixed status hues (contrast-safe versions are the PHP-derived success/warning/danger). */
	--atr-color-overlay-strong: color-mix(in srgb, var(--atr-color-dark) 72%, transparent);
}

/* -------------------------------------------------------------------------
 * 3. Context-dependent derived tokens
 *
 * Tokens built from other tokens with var()/color-mix() are declared on every context root so they
 * re-resolve with that context's colors (SPEC §17.1). Must come before the context re-maps below.
 * ---------------------------------------------------------------------- */

:root,
.atr-section--dark,
.atr-dark,
.atr-on-image,
.atr-on-primary,
.atr-light,
.has-dark-background-color,
.has-primary-background-color,
.has-background-background-color,
.has-surface-background-color,
.wp-block-cover:not(.is-light) .wp-block-cover__inner-container,
.atr-footer--dark .site-footer,
.atr-header-style--dark .site-header,
.atr-header-style--brand .site-header {
	--atr-border: 1px solid var(--atr-color-border);
	--atr-color-primary-soft: color-mix(in srgb, var(--atr-color-primary) 10%, var(--atr-color-bg));
	--atr-color-overlay: color-mix(in srgb, var(--atr-color-dark) 55%, transparent);
	--atr-color-hairline: color-mix(in srgb, var(--atr-color-text) 12%, transparent);
	--atr-color-inverse-bg: var(--atr-color-text);
	--atr-color-inverse-fg: var(--atr-color-bg);
	--atr-selection-bg: var(--atr-color-accent-soft);
	--atr-selection-fg: var(--atr-color-text);

	/* Form controls: border/fill/text. Controls read these (not the raw tokens) so photo and dark
	   contexts can strengthen boundaries to ≥ 3:1 without changing hairline borders. */
	--atr-field-border: var(--atr-color-field-border);
	--atr-field-bg: var(--atr-color-bg);
	--atr-field-fg: var(--atr-color-text);
	--atr-field-placeholder: var(--atr-color-muted-ink);
}

/* -------------------------------------------------------------------------
 * 4. Dark contexts: section bands, dark footer/header, Group blocks with the "Deep" background
 * ---------------------------------------------------------------------- */

.atr-section--dark,
.atr-dark,
.atr-footer--dark .site-footer,
.has-dark-background-color,
.atr-header-style--dark .site-header {
	--atr-color-bg: var(--atr-color-band);
	--atr-color-surface: var(--atr-color-surface-dark);
	--atr-color-text: var(--atr-color-on-dark);
	--atr-color-muted: var(--atr-color-muted-ink-dark);
	--atr-color-muted-ink: var(--atr-color-muted-ink-dark);
	--atr-color-border: var(--atr-color-border-dark);
	--atr-color-field-border: var(--atr-color-border-dark);
	--atr-color-primary: var(--atr-color-btn-on-dark);
	--atr-color-on-primary: var(--atr-color-btn-on-dark-text);
	--atr-color-primary-ink: var(--atr-color-on-dark);
	--atr-color-accent-ink: var(--atr-color-accent-ink-dark);
	--atr-color-focus: var(--atr-color-focus-dark);
	background-color: var(--atr-color-bg);
	color: var(--atr-color-text);

	/* Hover for the inverted button (SPEC §17.1). Refined below where relative colors are supported. */
	--atr-color-primary-hover: color-mix(in srgb, var(--atr-color-btn-on-dark) 88%, var(--atr-color-on-dark));

	/* Soft accent tint for icon circles and highlights, re-based on the band. */
	--atr-color-accent-soft: color-mix(in srgb, var(--atr-color-accent) 18%, var(--atr-color-band));

	/* Status colors re-tuned for dark bands (the derived ones are tuned for the page background). */
	--atr-color-success: color-mix(in srgb, var(--atr-root-success) 45%, var(--atr-color-on-dark));
	--atr-color-warning: color-mix(in srgb, var(--atr-root-warning) 45%, var(--atr-color-on-dark));
	--atr-color-danger: color-mix(in srgb, var(--atr-root-danger) 45%, var(--atr-color-on-dark));

	/* Form fields need a ≥ 3:1 boundary on the band; hairlines keep the subtle border-dark. */
	--atr-field-border: color-mix(in srgb, var(--atr-color-on-dark) 45%, var(--atr-color-band));
	--atr-field-bg: var(--atr-color-surface-dark);
	--atr-selection-bg: color-mix(in srgb, var(--atr-color-accent) 45%, var(--atr-color-band));
	--atr-selection-fg: var(--atr-color-on-dark);
}

/* Move the hover color away from the button text (keeps ≥ 4.5:1 when the button text is white). */
@supports (color: rgb(from red r g b)) {
	.atr-section--dark,
	.atr-dark,
	.atr-footer--dark .site-footer,
	.has-dark-background-color,
	.atr-header-style--dark .site-header {
		--atr-color-primary-hover: color-mix(in srgb, var(--atr-color-btn-on-dark) 84%, rgb(from var(--atr-color-btn-on-dark-text) calc(255 - r) calc(255 - g) calc(255 - b)));
	}
}

/* In the dark scheme a band can sit very close to the page background: outline it. */
.atr-scheme--dark .atr-section--dark,
.atr-scheme--dark .has-dark-background-color {
	border-block: 1px solid var(--atr-color-border-dark);
}

.atr-scheme--dark .atr-footer--dark .site-footer {
	border-block-start: 1px solid var(--atr-color-border-dark);
}

.atr-scheme--dark .atr-section--dark + .atr-section--dark {
	border-block-start: 0;
}

/* -------------------------------------------------------------------------
 * 5. Text over photos (hero, image page headers, Cover blocks)
 * ---------------------------------------------------------------------- */

.atr-on-image,
.wp-block-cover:not(.is-light) .wp-block-cover__inner-container {
	--atr-color-bg: var(--atr-color-band);
	--atr-color-surface: rgb(255 255 255 / 0.12);
	--atr-color-text: #fff;
	--atr-color-muted: rgb(255 255 255 / 0.82);
	--atr-color-muted-ink: rgb(255 255 255 / 0.82);
	--atr-color-border: rgb(255 255 255 / 0.35);
	--atr-color-field-border: rgb(255 255 255 / 0.7);
	--atr-color-primary: #fff;
	--atr-color-on-primary: #14171a;
	--atr-color-primary-hover: color-mix(in srgb, #fff 86%, var(--atr-color-accent));
	--atr-color-primary-ink: #fff;
	--atr-color-accent-ink: color-mix(in srgb, #fff 78%, var(--atr-color-accent));
	--atr-color-focus: #fff;
	--atr-color-accent-soft: rgb(255 255 255 / 0.14);
	--atr-color-success: color-mix(in srgb, var(--atr-root-success) 30%, #fff);
	--atr-color-warning: color-mix(in srgb, var(--atr-root-warning) 30%, #fff);
	--atr-color-danger: color-mix(in srgb, var(--atr-root-danger) 30%, #fff);
	--atr-color-inverse-fg: #14171a;
	--atr-field-border: #fff;
	--atr-field-bg: #fff;
	--atr-field-fg: #14171a;
	--atr-field-placeholder: #5c5f63;
	--atr-selection-bg: rgb(255 255 255 / 0.85);
	--atr-selection-fg: #14171a;
	color: var(--atr-color-text);
}

/* -------------------------------------------------------------------------
 * 6. Brand-colored areas (Group blocks with the Brand background, "brand" header style)
 * ---------------------------------------------------------------------- */

.atr-on-primary,
.has-primary-background-color,
.atr-header-style--brand .site-header {
	--atr-color-bg: var(--atr-root-primary);
	--atr-color-surface: color-mix(in srgb, var(--atr-root-on-primary) 8%, var(--atr-root-primary));
	--atr-color-text: var(--atr-root-on-primary);
	--atr-color-muted: color-mix(in srgb, var(--atr-root-on-primary) 85%, var(--atr-root-primary));
	--atr-color-muted-ink: color-mix(in srgb, var(--atr-root-on-primary) 85%, var(--atr-root-primary));
	--atr-color-border: color-mix(in srgb, var(--atr-root-on-primary) 25%, var(--atr-root-primary));
	--atr-color-field-border: color-mix(in srgb, var(--atr-root-on-primary) 65%, var(--atr-root-primary));
	--atr-color-primary: var(--atr-root-on-primary);
	--atr-color-on-primary: var(--atr-root-primary);
	--atr-color-primary-hover: color-mix(in srgb, var(--atr-root-on-primary) 86%, var(--atr-root-primary));
	--atr-color-primary-ink: var(--atr-root-on-primary);
	--atr-color-accent-ink: var(--atr-root-on-primary);
	--atr-color-focus: var(--atr-root-on-primary);
	--atr-field-border: color-mix(in srgb, var(--atr-root-on-primary) 65%, var(--atr-root-primary));
	--atr-field-bg: var(--atr-root-bg);
	--atr-field-fg: var(--atr-root-text);
	--atr-field-placeholder: var(--atr-root-muted-ink);
	--atr-selection-bg: var(--atr-root-on-primary);
	--atr-selection-fg: var(--atr-root-primary);
	color: var(--atr-color-text);
}

.atr-on-primary {
	background-color: var(--atr-color-bg);
}

/* Group blocks with the Highlight (accent) background: readable text. */
.has-accent-background-color {
	--atr-color-text: var(--atr-color-on-accent);
	--atr-color-primary-ink: var(--atr-color-on-accent);
	--atr-color-accent-ink: var(--atr-color-on-accent);
	--atr-color-muted-ink: var(--atr-color-on-accent);
	--atr-color-focus: var(--atr-color-on-accent);
	color: var(--atr-color-text);
}

/* -------------------------------------------------------------------------
 * 7. Light restore: page colors inside a dark/photo context (e.g. a light panel on a dark band)
 * ---------------------------------------------------------------------- */

.atr-light,
.has-background-background-color,
.has-surface-background-color {
	--atr-color-bg: var(--atr-root-bg);
	--atr-color-surface: var(--atr-root-surface);
	--atr-color-text: var(--atr-root-text);
	--atr-color-muted: var(--atr-root-muted);
	--atr-color-muted-ink: var(--atr-root-muted-ink);
	--atr-color-border: var(--atr-root-border);
	--atr-color-field-border: var(--atr-root-field-border);
	--atr-color-primary: var(--atr-root-primary);
	--atr-color-on-primary: var(--atr-root-on-primary);
	--atr-color-primary-hover: var(--atr-root-primary-hover);
	--atr-color-primary-ink: var(--atr-root-primary-ink);
	--atr-color-accent-ink: var(--atr-root-accent-ink);
	--atr-color-accent-soft: var(--atr-root-accent-soft);
	--atr-color-focus: var(--atr-root-focus);
	--atr-color-success: var(--atr-root-success);
	--atr-color-warning: var(--atr-root-warning);
	--atr-color-danger: var(--atr-root-danger);
	--atr-field-border: var(--atr-root-field-border);
	--atr-field-bg: var(--atr-root-bg);
	--atr-field-fg: var(--atr-root-text);
	--atr-field-placeholder: var(--atr-root-muted-ink);
	--atr-selection-bg: var(--atr-root-accent-soft);
	--atr-selection-fg: var(--atr-root-text);
	color: var(--atr-color-text);
}

.atr-light {
	background-color: var(--atr-color-bg);
}