/* ==========================================================================
   Hotel LYRO — Design Tokens
   Copied verbatim from the Hotel LYRO Design System (colors / typography /
   spacing / elevation / motion). Edit here to re-theme the whole site.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* Primary — warm bronze accent */
  --gold-100: #F2ECDF;
  --gold-200: #C9B896;
  --gold-500: #8B6F4E;
  --gold-600: #735A3D;
  --gold-700: #5C4830;

  /* Ink / neutrals */
  --ink: #2A1F14;
  --ink-soft: #3B2C1D;
  --heading: #2A1F14;
  --body: #56493B;
  --mute: #8C8074;
  --inverse: #FFFFFF;

  /* Canvas */
  --canvas: #FFFFFF;
  --canvas-warm: #FBF9F5;
  --canvas-soft: #F1EAD9;
  --canvas-dark: #2A1F14;
  --canvas-dark-soft: #3B2C1D;

  /* Borders / overlays */
  --border: #CEC9C5;
  --border-light: #E4E0DB;
  --overlay: rgba(20, 15, 10, 0.56);
  --overlay-soft: rgba(20, 15, 10, 0.34);

  /* Semantic */
  --positive: #54705A;
  --positive-pale: #E6EFE8;
  --warning: #C28B31;
  --warning-pale: #F8EDD8;
  --negative: #A7473F;
  --negative-pale: #F7E5E3;
  --info: #496778;
  --info-pale: #E5EEF2;

  /* Semantic aliases */
  --color-primary: var(--gold-500);
  --color-primary-hover: var(--gold-600);
  --color-primary-active: var(--gold-700);
  --color-primary-light: var(--gold-200);
  --color-primary-pale: var(--gold-100);

  --text-heading: var(--heading);
  --text-body: var(--body);
  --text-mute: var(--mute);
  --text-inverse: var(--inverse);
  --text-ink: var(--ink);

  --surface-canvas: var(--canvas);
  --surface-warm: var(--canvas-warm);
  --surface-soft: var(--canvas-soft);
  --surface-dark: var(--canvas-dark);
  --surface-dark-soft: var(--canvas-dark-soft);

  --border-default: var(--border);
  --border-subtle: var(--border-light);

  /* Type */
  --font-serif: 'Marcellus', Georgia, serif;
  --font-sans: 'Poppins', Inter, system-ui, sans-serif;

  --type-display-mega-size: 70px; --type-display-mega-weight: 500; --type-display-mega-line: 74px; --type-display-mega-spacing: -1.5px;
  --type-display-xxl-size: 58px; --type-display-xxl-weight: 500; --type-display-xxl-line: 62px; --type-display-xxl-spacing: -1.2px;
  --type-display-xl-size: 48px; --type-display-xl-weight: 500; --type-display-xl-line: 52px; --type-display-xl-spacing: -0.8px;
  --type-display-lg-size: 38px; --type-display-lg-weight: 500; --type-display-lg-line: 44px; --type-display-lg-spacing: -0.5px;
  --type-display-md-size: 32px; --type-display-md-weight: 500; --type-display-md-line: 38px; --type-display-md-spacing: -0.3px;
  --type-display-sm-size: 26px; --type-display-sm-weight: 600; --type-display-sm-line: 32px;
  --type-display-xs-size: 20px; --type-display-xs-weight: 600; --type-display-xs-line: 28px; --type-display-xs-spacing: -0.3px;
  --type-eyebrow-size: 12px; --type-eyebrow-weight: 700; --type-eyebrow-line: 18px; --type-eyebrow-spacing: 2px;
  --type-body-xl-size: 22px; --type-body-xl-weight: 400; --type-body-xl-line: 34px;
  --type-body-lg-size: 16px; --type-body-lg-weight: 400; --type-body-lg-line: 30px;
  --type-body-md-size: 16px; --type-body-md-weight: 400; --type-body-md-line: 26px;
  --type-body-md-strong-size: 16px; --type-body-md-strong-weight: 600; --type-body-md-strong-line: 26px;
  --type-body-sm-size: 14px; --type-body-sm-weight: 400; --type-body-sm-line: 22px;
  --type-body-sm-strong-size: 14px; --type-body-sm-strong-weight: 600; --type-body-sm-strong-line: 22px;
  --type-caption-size: 12px; --type-caption-weight: 400; --type-caption-line: 18px;
  --type-button-md-size: 14px; --type-button-md-weight: 700; --type-button-md-line: 20px; --type-button-md-spacing: 0.4px;
  --type-button-lg-size: 15px; --type-button-lg-weight: 700; --type-button-lg-line: 22px; --type-button-lg-spacing: 0.4px;

  /* Spacing */
  --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --space-5xl: 128px;

  --radius-none: 0px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 9999px; --radius-full: 9999px;

  --container-wide: 1440px; --container-main: 1240px; --container-content: 920px; --container-narrow: 720px;
  --header-height: 88px; --header-height-mobile: 72px;
  --gutter-desktop: 32px; --gutter-tablet: 24px; --gutter-mobile: 16px;

  /* Elevation */
  --elevation-0: none;
  --elevation-1: 0 4px 18px rgba(23, 23, 20, 0.06);
  --elevation-2: 0 10px 30px rgba(23, 23, 20, 0.09);
  --elevation-3: 0 18px 50px rgba(23, 23, 20, 0.13);
  --elevation-modal: 0 24px 80px rgba(23, 23, 20, 0.20);

  /* Motion */
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 600ms;
  --duration-hero: 1200ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
}