/* =========================================================================
   Hotel 360° Design System — tokens
   Distilled from design-reference/hotel360-landing.html and
   design-reference/hotel360-blog.html (2026-10-14).
   Layer 1: primitives (raw values). Layer 2: semantic tokens per theme.
   Components only read semantic tokens, so they work on dark and light.
   ========================================================================= */

:root {
  /* ---------- Brand green (#7dbf41 = logo green) ---------- */
  --green-100: #e6f2da;   /* soft fill on light surfaces */
  --green-300: #8fd15a;   /* hover of green fills */
  --green-400: #86cf52;   /* orb highlight */
  --green-500: #7dbf41;   /* brand: buttons, icons, accents */
  --green-600: #6cb33a;   /* large accent text on light (hero) */
  --green-700: #4f8f25;   /* small accent text on light (links, tags) */
  --green-800: #4e9132;   /* orb mid-tone */

  /* ---------- Ink: green-tinted darks ---------- */
  --ink-1000: #000000;    /* testimonial cards */
  --ink-950: #030403;     /* base dark section */
  --ink-900: #0a0b0a;     /* nav, footer */
  --ink-850: #0e1713;     /* "deep": alt dark section, text on light */
  --ink-800: #111a14;     /* fields on dark */
  --ink-750: #1a231f;     /* "dark": avatars, dark text */
  --ink-700: #1d2a20;     /* hairlines on dark */
  --ink-650: #2a352c;     /* borders on dark */
  --ink-600: #3a463c;     /* strong outlines on dark */

  /* ---------- Grays ---------- */
  --gray-600: #4b544b;    /* body text on light */
  --gray-500: #6b756e;    /* "concrete": muted text on light */
  --gray-450: #7f8a81;    /* subtle text on dark */
  --gray-400: #8a948b;    /* placeholders */
  --gray-300: #a3aba4;    /* muted text on dark */
  --gray-250: #b3bab3;    /* body text on dark */
  --gray-200: #d5dad4;    /* borders on light */
  --gray-150: #e3e6e2;    /* hairlines on light */
  --gray-100: #e7e7e7;    /* "light2" */
  --gray-50:  #f2f2f2;    /* "light": light section, text on dark */
  --white:    #ffffff;

  /* ---------- Typography ---------- */
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-heading: 300;   /* section headings; the reference mixes 300 and 400 */

  --fs-giant:   clamp(40px, 5.6vw, 92px);          /* testimonial title */
  --fs-display: clamp(42px, 6.4vw, 84px);          /* landing hero */
  --fs-h1:      clamp(36px, 4.6vw, 64px);          /* page / article hero */
  --fs-h2:      clamp(32px, 2.4vw + 18px, 54px);   /* section headings */
  --fs-h3:      clamp(25px, 1.2vw + 13px, 30px);   /* sub-sections, details */
  --fs-stat:    clamp(40px, 4.4vw, 64px);          /* big numbers */
  --fs-quote:   clamp(18px, 1.5vw, 23px);          /* testimonials */
  --fs-xl:   22px;  /* large card titles */
  --fs-lg:   20px;  /* card titles */
  --fs-md:   17px;  /* small titles, section intro */
  --fs-base: 16px;
  --fs-sm:   15px;  /* compact body */
  --fs-xs:   13.5px;/* card body, nav, chips */
  --fs-2xs:  12px;  /* labels, captions */
  --fs-3xs:  11px;  /* eyebrows, tags */

  --lh-tight: 1.04;
  --lh-heading: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --lh-relaxed: 1.75;

  /* final design: normal tracking everywhere except the giant testimonial title */
  --ls-giant: -0.035em;
  --ls-heading: normal;
  --ls-title: normal;
  --ls-caps: normal;
  --ls-eyebrow: normal;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-22: 88px;
  --space-24: 96px;
  --space-30: 120px;

  /* ---------- Layout ---------- */
  --container: 1152px;
  --gut: 32px;          /* side gutter */
  --sec-y: 120px;       /* section vertical padding */
  --head-gap: 56px;     /* section heading -> content */
  --pad-card: 28px;
  --nav-h: 72px;

  /* ---------- Radius (derived from the logo tile, ~25% of side) ---------- */
  --r-xs: 6px;      /* tags, nav links */
  --r-sm: 10px;     /* buttons, inputs, chips */
  --r-tile: 12px;   /* small tiles, nodes */
  --r-md: 22px;     /* cards, panels */
  --r-lg: 30px;     /* feature frames */
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-float: 0 18px 36px -18px rgba(26,35,31,.3), 0 2px 6px -2px rgba(26,35,31,.08);
  --shadow-node: 0 16px 34px -16px rgba(14,23,19,.28);
  --shadow-card-light: inset 0 1px 0 rgba(255,255,255,.9), 0 24px 50px -30px rgba(26,35,31,.35), 0 4px 14px -8px rgba(26,35,31,.12);
  --shadow-feature: 0 40px 80px -50px rgba(14,23,19,.45);
  --shadow-feature-hover: 0 50px 90px -50px rgba(14,23,19,.55);
  --shadow-panel: 0 40px 80px -30px rgba(14,23,19,.5), 0 8px 24px -12px rgba(14,23,19,.25);
  --shadow-dark: 0 40px 80px -30px rgba(0,0,0,.9);
  --shadow-dark-sm: 0 30px 60px -20px rgba(0,0,0,.45);
  --shadow-glow: 0 30px 60px -30px rgba(125,191,65,.35);
  --shadow-btn-hover: 0 10px 28px -8px rgba(125,191,65,.7);
  --ring: 0 0 0 4px rgba(125,191,65,.18);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-fast: .2s;
  --dur: .35s;
  --dur-slow: .6s;

  /* ---------- Layers ---------- */
  --z-sticky: 20;
  --z-nav: 50;
  --z-overlay: 80;
  --z-chat: 90;

  /* ---------- Brand textures ---------- */
  --orb: radial-gradient(circle at 70% 30%, var(--green-400), var(--green-800) 55%, var(--ink-850));
  --tex-dots-dark: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  --tex-dots-light: radial-gradient(rgba(14,23,19,.07) 1px, transparent 1px);
}

@media (max-width: 1024px) {
  :root { --sec-y: 96px; --head-gap: 48px; }
}
@media (max-width: 900px) {
  :root { --nav-h: 60px; }   /* matches the sticky offsets used by the page scripts */
}
@media (max-width: 700px) {
  :root { --pad-card: 20px; }
}
@media (max-width: 600px) {
  :root { --gut: 20px; --sec-y: 72px; --head-gap: 36px; }
}

/* =========================================================================
   Themes — set on any element: <section data-theme="light">.
   Dark is the default (the landing's base); the blog and light sections
   switch to light.
   ========================================================================= */
/* inherently dark components carry their own theme, so they work inside light pages too */
:root,
[data-theme="dark"],
.navbar, .footer, .cta-band, .hero-photo, .quote-card, .result-card, .inline-cta, .stats-panel {
  --bg: var(--ink-950);
  --bg-alt: var(--ink-850);
  --surface: #0c130f;
  --surface-strong: var(--ink-1000);
  --text: var(--gray-50);
  --text-body: var(--gray-250);
  --text-muted: var(--gray-300);
  --text-subtle: var(--gray-450);
  --line: var(--ink-700);
  --line-strong: var(--ink-650);
  --outline: var(--ink-600);
  --field-bg: var(--ink-800);
  --field-line: var(--ink-650);
  --accent: var(--green-500);
  --accent-hover: var(--green-300);
  --accent-text: var(--green-500);
  --accent-soft: rgba(125,191,65,.12);
  --accent-line: rgba(125,191,65,.35);
  --on-accent: var(--ink-850);
  --shadow-card: var(--shadow-dark-sm);
  --tex-dots: var(--tex-dots-dark);
  /* component-level */
  --text-prose: var(--gray-250);
  --accent-display: var(--green-500);
  --control-bg: rgba(255,255,255,.03);
  --tag-neutral-bg: rgba(255,255,255,.08);
  --tag-neutral-text: #c9cfc9;
  --panel-bg: #0e1712;
  --panel-line: #1f2d22;
  --panel-shadow: var(--shadow-dark-sm);
  --chip-on-bg: var(--gray-50);
  --chip-on-text: var(--ink-850);
  --rail-bg: rgba(255,255,255,.02);
  --logo-filter: grayscale(1) brightness(1.6);
  --skeleton-a: #161d18;
  --skeleton-b: #1d261f;
  --menu-bg: #121b15;
  --menu-line: var(--ink-650);
  --menu-shadow: 0 24px 48px -16px rgba(0,0,0,.7);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: var(--gray-50);
  --bg-alt: var(--white);
  --surface: var(--white);
  --surface-strong: var(--white);
  --text: var(--ink-850);
  --text-body: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-subtle: var(--gray-400);
  --line: var(--gray-100);
  --line-strong: var(--gray-200);
  --outline: var(--gray-200);
  --field-bg: var(--white);
  --field-line: var(--gray-200);
  --accent: var(--green-500);
  --accent-hover: var(--green-300);
  --accent-text: var(--green-700);
  --accent-soft: var(--green-100);
  --accent-line: rgba(125,191,65,.45);
  --on-accent: var(--ink-850);
  --shadow-card: var(--shadow-card-light);
  --tex-dots: var(--tex-dots-light);
  /* component-level */
  --text-prose: #2a332d;
  --accent-display: var(--green-600);
  --control-bg: var(--white);
  --tag-neutral-bg: var(--gray-100);
  --tag-neutral-text: var(--gray-500);
  --panel-bg: var(--white);
  --panel-line: var(--gray-100);
  --panel-shadow: var(--shadow-card-light);
  --chip-on-bg: var(--ink-850);
  --chip-on-text: var(--gray-50);
  --rail-bg: rgba(242,242,242,.6);
  --logo-filter: grayscale(1) brightness(.4);
  --skeleton-a: #e1e5e0;
  --skeleton-b: #eef1ed;
  --menu-bg: var(--white);
  --menu-line: var(--gray-200);
  --menu-shadow: 0 24px 48px -20px rgba(14,23,19,.3), 0 4px 12px -6px rgba(14,23,19,.12);
  color-scheme: light;
}