/*
 * XPRS Hotelier — design tokens.
 * Brand-level values are injected at runtime from theme configuration
 * (see inc/config.php :: xh_brand_css_variables).
 *
 * Direction: "Paper & Ink" — editorial, quiet, hairline-led, with a single
 * warm brass accent. Cormorant Garamond display over Karla text.
 */

:root {
  /* Brand primitives; overridden by injected brand tokens. */
  --xh-color-primary: #1a1815;
  --xh-color-accent: #a8763e;
  --xh-color-surface: #f5f3ee;
  --xh-color-ink: #23211c;

  /* Derived surfaces and lines. */
  --xh-color-surface-2: #e8e4dd;
  --xh-color-surface-3: color-mix(in srgb, var(--xh-color-surface) 82%, var(--xh-color-ink));
  --xh-color-muted: color-mix(in srgb, var(--xh-color-ink) 58%, var(--xh-color-surface));
  --xh-color-faint: color-mix(in srgb, var(--xh-color-ink) 38%, var(--xh-color-surface));
  --xh-color-line: color-mix(in srgb, var(--xh-color-ink) 16%, var(--xh-color-surface));
  --xh-color-line-strong: color-mix(in srgb, var(--xh-color-ink) 34%, var(--xh-color-surface));
  --xh-color-on-primary: #faf8f4;
  --xh-color-on-accent: #17140f;
  --xh-color-overlay: 12, 11, 9;

  /* Text and shading used over photography — identical in both schemes. */
  --xh-color-on-dark: 255, 255, 255;
  --xh-color-scrim: 12, 11, 9;

  /* Type families. */
  --xh-font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --xh-font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale. */
  --xh-text-2xs: 0.6875rem;
  --xh-text-xs: 0.75rem;
  --xh-text-sm: 0.875rem;
  --xh-text-base: 1.0625rem;
  --xh-text-md: 1.125rem;
  --xh-text-lg: 1.3125rem;
  --xh-text-xl: clamp(1.5rem, 2vw, 1.75rem);
  --xh-text-2xl: clamp(1.9rem, 3vw, 2.6rem);
  --xh-text-3xl: clamp(2.4rem, 4.6vw, 3.6rem);
  --xh-text-4xl: clamp(3rem, 7vw, 5.25rem);
  --xh-text-display: clamp(3.4rem, 9vw, 7rem);

  --xh-leading-tight: 1.06;
  --xh-leading-snug: 1.2;
  --xh-leading-body: 1.7;

  --xh-tracking-tight: -0.02em;
  --xh-tracking-wide: 0.18em;
  --xh-tracking-wider: 0.26em;

  /* Spacing. */
  --xh-space-1: 0.25rem;
  --xh-space-2: 0.5rem;
  --xh-space-3: 0.75rem;
  --xh-space-4: 1rem;
  --xh-space-5: 1.5rem;
  --xh-space-6: 2rem;
  --xh-space-7: 3rem;
  --xh-space-8: 4.5rem;
  --xh-space-9: 7rem;
  --xh-space-10: 10rem;

  /* Shape. */
  --xh-radius: 2px;
  --xh-radius-lg: 4px;
  --xh-radius-pill: 999px;
  --xh-hairline: 1px solid var(--xh-color-line);

  /* Measure. */
  --xh-container: 1320px;
  --xh-container-wide: 1560px;
  --xh-container-narrow: 720px;
  --xh-measure: 66ch;

  /* Elevation — used sparingly; cards stay flat by design. */
  --xh-shadow-sm: 0 1px 2px rgba(var(--xh-color-overlay), 0.06);
  --xh-shadow-md: 0 18px 44px -22px rgba(var(--xh-color-overlay), 0.28);
  --xh-shadow-lg: 0 40px 90px -40px rgba(var(--xh-color-overlay), 0.42);

  /* Motion. */
  --xh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --xh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --xh-duration-fast: 160ms;
  --xh-duration: 320ms;
  --xh-duration-slow: 720ms;
  --xh-duration-cinematic: 1200ms;

  /* Chrome. */
  --xh-header-height: 84px;
  --xh-header-height-condensed: 64px;
  --xh-utility-height: 38px;
  --xh-admin-bar-height: 0px;
  --xh-z-header: 60;
  --xh-z-mega: 58;
  --xh-z-bookbar: 56;
  --xh-z-drawer: 70;
  --xh-z-lightbox: 90;
}

body.admin-bar { --xh-admin-bar-height: 32px; }
html:has(body.admin-bar) { --xh-admin-bar-height: 32px; }

@media (max-width: 782px) {
  body.admin-bar { --xh-admin-bar-height: 46px; }
  html:has(body.admin-bar) { --xh-admin-bar-height: 46px; }
}

[data-xh-scheme="dark"] {
  --xh-color-primary: #e9e3d6;
  --xh-color-accent: #c99a5b;
  --xh-color-surface: #131210;
  --xh-color-ink: #f2efe7;

  --xh-color-surface-2: #1c1a17;
  --xh-color-surface-3: color-mix(in srgb, var(--xh-color-surface) 76%, var(--xh-color-ink));
  --xh-color-muted: color-mix(in srgb, var(--xh-color-ink) 64%, var(--xh-color-surface));
  --xh-color-faint: color-mix(in srgb, var(--xh-color-ink) 44%, var(--xh-color-surface));
  --xh-color-line: color-mix(in srgb, var(--xh-color-ink) 20%, var(--xh-color-surface));
  --xh-color-line-strong: color-mix(in srgb, var(--xh-color-ink) 40%, var(--xh-color-surface));
  --xh-color-on-primary: #131210;
  --xh-color-on-accent: #17140f;
  --xh-color-overlay: 0, 0, 0;
}