@import url('https://fonts.googleapis.com/css2?family=Anton&family=Grand+Hotel&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Mono:wght@400;500&display=swap');

/* ============================================================
   Color tokens
   ============================================================ */
:root {
  --teal-50:  #ECFBFB; --teal-100: #D6F4F4; --teal-200: #A8E8E8;
  --teal-300: #6FD9D9; --teal-400: #2FC7C7; --teal-500: #00B4B4;
  --teal-600: #009E9E; --teal-700: #00807F; --teal-800: #04605F; --teal-900: #0A4544;

  --orange-50:  #FEF7EA; --orange-100: #FDEDD2; --orange-200: #FCDDAB;
  --orange-300: #FBCB7E; --orange-400: #F8B84E; --orange-500: #F5A623;
  --orange-600: #E08F14; --orange-700: #BD740C; --orange-800: #92590B; --orange-900: #6E430A;

  --navy-50:  #EEF1F6; --navy-100: #D4DBE7; --navy-200: #A6B3C8;
  --navy-300: #6E80A0; --navy-400: #45587C; --navy-500: #2C3F62;
  --navy-600: #283C66; --navy-700: #233861; --navy-800: #1A2B4A;
  --navy-900: #11203B; --navy-950: #0B1729;

  --cream-50:  #FCFAF2; --cream-100: #FBF7EC; --cream-200: #F5EDD6;
  --cream-300: #ECE0BF; --cream-400: #E0D0A6; --cream-500: #D2BE8B;

  --sun-300: #FFE08A; --sun-400: #FFD45E; --sun-500: #FFC53D;
  --coral-400: #F0705A; --coral-500: #E2543C; --coral-600: #C5402B;
  --leaf-400: #4FB07A; --leaf-500: #2E9E63; --leaf-600: #218150;

  /* Semantic */
  --color-bg:          var(--cream-200);
  --color-bg-alt:      var(--cream-100);
  --surface-card:      #FFFDF7;
  --surface-raised:    var(--cream-50);
  --surface-sunk:      var(--cream-300);
  --surface-sea:       var(--teal-500);
  --surface-ink:       var(--navy-800);
  --surface-ink-deep:  var(--navy-900);

  --text-ink:        var(--navy-800);
  --text-muted:      var(--navy-400);
  --text-soft:       var(--navy-300);
  --text-on-sea:     #06403F;
  --text-on-ink:     var(--cream-200);
  --text-on-orange:  var(--navy-900);
  --text-inverse:    var(--cream-50);

  --brand-primary:       var(--teal-500);
  --brand-primary-deep:  var(--teal-700);
  --brand-accent:        var(--orange-500);
  --brand-accent-deep:   var(--orange-600);
  --brand-ink:           var(--navy-800);
  --brand-paper:         var(--cream-200);

  --border-ink:    var(--navy-800);
  --border-soft:   rgba(26, 43, 74, 0.14);
  --border-sea:    var(--teal-600);
  --border-strong: var(--navy-900);

  --color-success:    var(--leaf-500);
  --color-success-bg: #E1F3E8;
  --color-warning:    var(--orange-500);
  --color-warning-bg: var(--orange-100);
  --color-danger:     var(--coral-500);
  --color-danger-bg:  #FCE5E0;
  --color-info:       var(--teal-600);
  --color-info-bg:    var(--teal-100);
  --focus-ring:       var(--orange-500);
}

/* ============================================================
   Typography tokens
   ============================================================ */
:root {
  --font-script:  "Grand Hotel", "Brush Script MT", cursive;
  --font-display: "Anton", "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Work Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "DM Mono", "SFMono-Regular", ui-monospace, monospace;

  --text-hero:    clamp(3.25rem, 7vw, 6rem);
  --text-display: clamp(2.5rem, 5vw, 4rem);
  --text-h1:      clamp(2rem, 3.6vw, 3rem);
  --text-h2:      clamp(1.6rem, 2.6vw, 2.25rem);
  --text-h3:      1.5rem;
  --text-h4:      1.25rem;
  --text-lead:    1.25rem;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;
  --text-2xs:     0.6875rem;

  --weight-regular: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700; --weight-black: 800;

  --leading-tight:   1.04; --leading-snug: 1.2;
  --leading-normal:  1.5;  --leading-relaxed: 1.7;

  --tracking-poster:  0.01em;
  --tracking-eyebrow: 0.22em;
  --tracking-wide:    0.04em;
  --tracking-tight:   -0.01em;
}

/* ============================================================
   Spacing & layout tokens
   ============================================================ */
:root {
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-32: 128px;

  --section-y:        clamp(64px, 9vw, 128px);
  --section-y-tight:  clamp(40px, 6vw, 72px);
  --container:        1200px;
  --container-narrow: 760px;
  --gutter:           clamp(20px, 5vw, 64px);

  --control-h-sm: 36px;
  --control-h:    46px;
  --control-h-lg: 56px;
}

/* ============================================================
   Radius, shadow & motion tokens
   ============================================================ */
:root {
  --radius-xs: 6px;  --radius-sm: 10px; --radius-md: 16px;
  --radius-lg: 22px; --radius-xl: 30px; --radius-2xl: 40px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(26,43,74,0.10);
  --shadow-sm: 0 2px 6px rgba(26,43,74,0.12);
  --shadow-md: 0 8px 20px rgba(26,43,74,0.14);
  --shadow-lg: 0 18px 40px rgba(26,43,74,0.18);
  --shadow-xl: 0 30px 70px rgba(11,23,41,0.24);
  --shadow-sticker:    6px 6px 0 var(--navy-800);
  --shadow-sticker-sm: 4px 4px 0 var(--navy-800);

  --border-w-hair: 1px; --border-w: 2px; --border-w-bold: 3px;

  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms;

  --z-sticky: 100; --z-modal: 1100;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-poster);
  color: var(--text-ink);
  text-transform: uppercase;
  margin: 0 0 0.4em;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p  { margin: 0 0 1em; text-wrap: pretty; }
a  { color: var(--teal-700); text-decoration: none; }
a:hover { color: var(--teal-800); }
strong, b { font-weight: var(--weight-bold); }
::selection { background: var(--orange-300); color: var(--navy-900); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   Utility classes
   ============================================================ */
.yw-script  { font-family: var(--font-script); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1; }
.yw-poster  { font-family: var(--font-display); text-transform: uppercase; line-height: var(--leading-tight); }
.yw-eyebrow { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--brand-accent-deep); }
.yw-mono    { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* ============================================================
   Page shell
   ============================================================ */
html, body { margin: 0; background: var(--cream-200); }
#root { min-height: 100vh; }

/* ============================================================
   Responsive collapses
   ============================================================ */
@media (max-width: 860px) {
  .yw-hero-grid  { grid-template-columns: 1fr !important; }
  .yw-modal-grid { grid-template-columns: 1fr !important; }
  .yw-modal-book { border-left: none !important; border-top: 2px solid var(--navy-800) !important; }
  .yw-foot-grid  { grid-template-columns: 1fr !important; }
  .yw-navlinks, .yw-navphone { display: none !important; }
}
@media (max-width: 560px) {
  .yw-navlinks { display: none !important; }
}


@keyframes yw-spin {
  to { transform: rotate(360deg); }
}