/**
 * INTERLUX — Design tokens
 *
 * Implements the palette, type, spacing and container system defined in the
 * INTERLUX Design Master. Components consume these variables; they do not
 * invent their own values.
 *
 * Prefix: --ilx-
 */

:root {
	/* ---------------------------------------------------------------------
	 * Colour
	 *
	 * Warm ivory is the canvas; white is a surface, not the identity. One
	 * material accent (taupe/bronze), and red reserved for commercial signal.
	 * ------------------------------------------------------------------- */

	/* Surfaces */
	--ilx-canvas: #f5f2ec;         /* page ground */
	--ilx-surface: #faf8f4;        /* raised panels */
	--ilx-surface-strong: #ffffff; /* stages that need maximum neutrality */
	--ilx-surface-muted: #ebe6de;  /* image stages, alternating bands */

	/* Dark editorial surfaces */
	--ilx-ink: #171715;
	--ilx-ink-soft: #24231f;
	--ilx-charcoal: #2f2d29;

	/* Text */
	--ilx-text: #1c1b18;
	--ilx-text-secondary: #666159;
	--ilx-text-muted: #8b857c;
	--ilx-text-on-dark: #f5f2ec;
	--ilx-text-on-dark-muted: #c7c0b5;

	/* Lines */
	--ilx-line: #ded8cf;
	--ilx-line-soft: #e9e4dc;
	--ilx-line-dark: rgba(255, 255, 255, 0.16);

	/* Material accent */
	--ilx-accent: #9a8266;
	--ilx-accent-hover: #7e684f;

	/* Commercial states */
	--ilx-sale: #c53226;
	--ilx-success: #45634d;
	--ilx-error: #b72f28;

	--ilx-focus: #2f6fd0;

	/*
	 * Compatibility aliases. The header, shell and WooCommerce layers were
	 * written against the earlier names; mapping them here re-skins those
	 * surfaces with the master palette without rewriting working CSS.
	 */
	--ilx-color-bg: var(--ilx-canvas);
	--ilx-color-surface: var(--ilx-surface);
	--ilx-color-surface-alt: var(--ilx-surface-muted);
	--ilx-color-surface-deep: var(--ilx-ink);
	--ilx-color-ink: var(--ilx-text);
	--ilx-color-text: var(--ilx-text);
	--ilx-color-muted: var(--ilx-text-secondary);
	--ilx-color-on-dark: var(--ilx-text-on-dark);
	--ilx-color-on-dark-muted: var(--ilx-text-on-dark-muted);
	--ilx-color-line: var(--ilx-line);
	--ilx-color-line-strong: #cec7bc;
	--ilx-color-accent: var(--ilx-accent);
	--ilx-color-accent-strong: var(--ilx-accent-hover);
	--ilx-color-accent-soft: #efe9e0;
	--ilx-color-sale: var(--ilx-sale);
	--ilx-color-sale-soft: #f7e9e7;
	--ilx-color-success: var(--ilx-success);
	--ilx-color-success-soft: #e9f0ea;
	--ilx-color-notice: #8a6a1f;
	--ilx-color-notice-soft: #f7efdc;
	--ilx-color-focus: var(--ilx-focus);
	--ilx-color-faint: #9a938660;

	/* ---------------------------------------------------------------------
	 * Typography
	 *
	 * Display is an editorial serif; UI and body stay on a neutral sans. No
	 * webfonts are downloaded — both stacks resolve to faces already on the
	 * device, which keeps the site GDPR-clean and adds zero requests. Every
	 * face in the display stack was rendered and checked for Romanian
	 * comma-below diacritics (ș ț) before being listed; Palatino failed that
	 * test and is excluded. A self-hosted Cormorant Garamond is the intended
	 * upgrade once font files can be supplied.
	 * ------------------------------------------------------------------- */
	--ilx-font-display: "Hoefler Text", "Iowan Old Style", Charter, Constantia, Cambria, Georgia, serif;
	--ilx-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--ilx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Weights — luxury reads light, never 700+ */
	--ilx-weight-light: 300;
	--ilx-weight-regular: 400;
	--ilx-weight-medium: 500;
	--ilx-weight-semibold: 600;

	/* Type roles */
	--ilx-display-xl: clamp(3rem, 5.6vw, 6.5rem);
	--ilx-display-lg: clamp(2.5rem, 4.2vw, 5rem);
	--ilx-heading-1: clamp(2.2rem, 3.5vw, 4rem);
	--ilx-heading-2: clamp(1.9rem, 2.7vw, 3rem);
	--ilx-heading-3: clamp(1.35rem, 1.8vw, 2rem);
	--ilx-body-lg: clamp(1.05rem, 1.15vw, 1.25rem);
	--ilx-body: 1rem;
	--ilx-small: 0.875rem;
	--ilx-label: 0.75rem;

	/* Aliases for components written against the earlier scale. */
	--ilx-text-display: var(--ilx-display-xl);
	--ilx-text-h1: var(--ilx-heading-1);
	--ilx-text-h2: var(--ilx-heading-2);
	--ilx-text-h3: var(--ilx-heading-3);
	--ilx-text-h4: 1.125rem;
	--ilx-text-lead: var(--ilx-body-lg);
	--ilx-text-body: var(--ilx-body);
	--ilx-text-small: var(--ilx-small);
	--ilx-text-xs: var(--ilx-label);
	--ilx-text-price: 1rem;
	--ilx-label-size: 0.6875rem;
	--ilx-nav-size: 0.75rem;
	--ilx-nav-weight: var(--ilx-weight-medium);
	--ilx-button-size: 0.75rem;

	/* Line heights */
	--ilx-leading-tight: 1.02;
	--ilx-leading-snug: 1.15;
	--ilx-leading-normal: 1.45;
	--ilx-leading-relaxed: 1.65;

	/* Letter spacing — a serif display needs far less negative tracking */
	--ilx-tracking-display: -0.015em;
	--ilx-tracking-heading: -0.01em;
	--ilx-tracking-body: 0;
	--ilx-tracking-label: 0.18em;
	--ilx-tracking-nav: 0.08em;

	/* Editorial measure */
	--ilx-measure: 52ch;

	/* ---------------------------------------------------------------------
	 * Space
	 * ------------------------------------------------------------------- */
	--ilx-space-1: 0.375rem;
	--ilx-space-2: 0.625rem;
	--ilx-space-3: 1rem;
	--ilx-space-4: 1.5rem;
	--ilx-space-5: 2rem;
	--ilx-space-6: 3rem;
	--ilx-space-7: 4.5rem;
	--ilx-space-8: 6rem;
	--ilx-space-9: 8rem;

	/* Aliases for components written against the earlier scale. */
	--ilx-space-3xs: var(--ilx-space-1);
	--ilx-space-2xs: var(--ilx-space-2);
	--ilx-space-xs: 0.75rem;
	--ilx-space-sm: var(--ilx-space-3);
	--ilx-space-md: var(--ilx-space-4);
	--ilx-space-lg: var(--ilx-space-5);
	--ilx-space-xl: var(--ilx-space-7);
	--ilx-space-2xl: var(--ilx-space-8);
	--ilx-space-3xl: var(--ilx-space-9);

	/*
	 * Section rhythm. Premium is controlled breathing room, not maximum
	 * emptiness — a weak section must not become 900px tall to look luxurious.
	 */
	--ilx-section: clamp(3rem, 1.5rem + 4.5vw, 7rem);        /* normal */
	--ilx-section-feature: clamp(4rem, 2rem + 6vw, 9rem);     /* editorial break */
	--ilx-section-strip: clamp(2.25rem, 1.5rem + 2vw, 4rem);  /* commercial strip */
	--ilx-section-gap: var(--ilx-section);
	--ilx-section-gap-tight: var(--ilx-section-strip);

	/* ---------------------------------------------------------------------
	 * Containers
	 * ------------------------------------------------------------------- */
	--ilx-page-max: 1520px;
	--ilx-content-max: 1360px;
	--ilx-reading-max: 760px;
	--ilx-gutter: clamp(20px, 4vw, 72px);

	/*
	 * The outer rail: exactly the space the master container leaves on each
	 * side. Full-bleed compositions use it as a real grid track, so an image
	 * can run to the viewport edge while the copy stays on the page grid —
	 * with no negative margins and no 100vw, and therefore no overflow.
	 */
	--ilx-rail: max(var(--ilx-gutter), calc((100% - var(--ilx-content-max)) / 2));

	--ilx-container-narrow: var(--ilx-reading-max);
	--ilx-container: var(--ilx-content-max);
	--ilx-container-wide: var(--ilx-page-max);

	/* ---------------------------------------------------------------------
	 * Borders, radii, shadows
	 *
	 * Architectural, not SaaS: hairlines and near-square corners.
	 * ------------------------------------------------------------------- */
	--ilx-border-width: 1px;
	--ilx-radius-sm: 0px;
	--ilx-radius-md: 2px;
	--ilx-radius-lg: 3px;
	--ilx-radius-pill: 999px;

	--ilx-shadow-sm: none;
	--ilx-shadow-md: 0 12px 32px -24px rgba(23, 23, 21, 0.4);
	--ilx-shadow-lg: 0 26px 60px -34px rgba(23, 23, 21, 0.45);

	/* ---------------------------------------------------------------------
	 * Motion
	 * ------------------------------------------------------------------- */
	--ilx-ease: cubic-bezier(0.22, 0.61, 0.24, 1);
	--ilx-duration-fast: 160ms;
	--ilx-duration: 260ms;
	--ilx-duration-slow: 520ms;
	--ilx-transition: var(--ilx-duration) var(--ilx-ease);

	/* ---------------------------------------------------------------------
	 * Header sizing
	 * ------------------------------------------------------------------- */
	--ilx-header-height: 92px;
	--ilx-navrow-height: 54px;
	--ilx-header-height-mobile: 68px;

	/* ---------------------------------------------------------------------
	 * Layering
	 * ------------------------------------------------------------------- */
	--ilx-z-base: 1;
	--ilx-z-sticky: 100;
	--ilx-z-header: 200;
	--ilx-z-drawer: 300;
	--ilx-z-modal: 400;
	--ilx-z-toast: 500;

	/* ---------------------------------------------------------------------
	 * Breakpoints — declarative only; media queries repeat them literally.
	 *   sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1600
	 * ------------------------------------------------------------------- */
	--ilx-bp-sm: 480px;
	--ilx-bp-md: 768px;
	--ilx-bp-lg: 1024px;
	--ilx-bp-xl: 1280px;
	--ilx-bp-2xl: 1600px;
}