/*
  Velmora Casino Hotel — Design Tokens
  Custom properties for palette, spacing, typography, and structural rules.
  Part of a CUBE-inspired CSS approach (Composition, Utility, Block, Exception).
*/

:root {
  /* Palette */
  --vl-ink-navy: #172029;
  --vl-deep-charcoal: #11171c;
  --vl-parchment: #e5e1da;
  --vl-ivory: #f4f0e9;
  --vl-stone: #c9c3b8;
  --vl-brass: #9a7949;
  --vl-brass-bright: #b6905c;
  --vl-walnut: #684936;
  --vl-black-soft: #252524;
  --vl-line: rgba(154, 121, 73, 0.35);
  --vl-line-light: rgba(37, 37, 36, 0.14);
  --vl-line-dark: rgba(229, 225, 218, 0.16);

  /* Surfaces (semantic) */
  --vl-surface-dark: var(--vl-deep-charcoal);
  --vl-surface-dark-alt: var(--vl-ink-navy);
  --vl-surface-light: var(--vl-ivory);
  --vl-surface-light-alt: var(--vl-parchment);
  --vl-text-on-dark: var(--vl-ivory);
  --vl-text-on-dark-muted: var(--vl-stone);
  --vl-text-on-light: var(--vl-black-soft);
  --vl-text-on-light-muted: #55534d;
  --vl-accent: var(--vl-brass);

  /* Typography */
  --vl-font-display: "Castoro Titling", "Iowan Old Style", "Palatino Linotype", serif;
  --vl-font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vl-fs-h1: clamp(2.1rem, 1.4rem + 3.4vw, 4.1rem);
  --vl-fs-h2: clamp(1.7rem, 1.25rem + 2vw, 2.9rem);
  --vl-fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
  --vl-fs-lead: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  --vl-fs-body: 1rem;
  --vl-fs-small: 0.875rem;
  --vl-fs-eyebrow: 0.78rem;
  --vl-lh-body: 1.55;
  --vl-lh-heading: 1.15;
  --vl-ls-eyebrow: 0.18em;

  /* Spacing */
  --vl-space-3xs: 0.25rem;
  --vl-space-2xs: 0.5rem;
  --vl-space-xs: 0.75rem;
  --vl-space-s: 1rem;
  --vl-space-m: 1.5rem;
  --vl-space-l: 2.25rem;
  --vl-space-xl: 3.5rem;
  --vl-space-2xl: 5.5rem;
  --vl-space-3xl: 8rem;

  /* Structure */
  --vl-content-max: 1440px;
  --vl-text-max: 42rem;
  --vl-radius-s: 2px;
  --vl-radius-m: 3px;
  --vl-border: 1px solid var(--vl-line);
  --vl-border-dark: 1px solid var(--vl-line-dark);
  --vl-border-light: 1px solid var(--vl-line-light);

  /* Motion */
  --vl-duration-fast: 160ms;
  --vl-duration-mid: 320ms;
  --vl-duration-slow: 620ms;
  --vl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --vl-duration-fast: 0ms;
    --vl-duration-mid: 0ms;
    --vl-duration-slow: 0ms;
  }
}