/* ============================================================
   Hospitality Prime — Webfonts
   ------------------------------------------------------------
   Brand fonts (licensed files in assets/fonts/):
     • Neue Montreal  — Regular / Medium / Bold / Light
     • Noto Serif Display — Variable (Light italic for quotes)
     • Duplet Bold    — CTAs only, ALWAYS +200 tracking (0.2em)
                        Duplet Semibold is NOT used.
   ============================================================ */

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Regular.woff2') format('woff2'), url('../fonts/NeueMontreal-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Light.woff2') format('woff2'), url('../fonts/NeueMontreal-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Medium.woff2') format('woff2'), url('../fonts/NeueMontreal-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Bold.woff2') format('woff2'), url('../fonts/NeueMontreal-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



/* Duplet — Bold only. Always pair with letter-spacing: 0.2em and text-transform: uppercase. */
@font-face {
  font-family: 'Duplet';
  src: url('../fonts/Duplet-Bold.woff2') format('woff2'), url('../fonts/Duplet-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Hospitality Prime — Color Tokens
   Source: Brand Guidelines v1.0 (Dic 2025) palette swatches.
   ============================================================ */

:root {
  /* ---- Brand core palette (from guidelines) ---- */
  --hp-coral:  #FD5D48;   /* primary brand accent */
  --hp-navy:   #022338;   /* deep navy — primary dark / text */
  --hp-ink:    #0F1524;   /* near-black navy */
  --hp-sand:   #CCB68B;   /* warm tan / gold */
  --hp-gold:   #CCB68B;   /* alias — 'oro' of the logo versions (= --hp-sand) */
  --hp-sage:   #9FC4C0;   /* muted teal / sage */
  --hp-paper:  #F5F6F7;   /* light neutral surface */
  --hp-white:  #FFFFFF;

  /* ---- Coral scale ---- */
  --coral-50:  #FFF1EE;
  --coral-100: #FFDED7;
  --coral-200: #FFC2B6;
  --coral-300: #FF9C89;
  --coral-400: #FD7763;
  --coral-500: #FD5D48;   /* = --hp-coral */
  --coral-600: #EE4630;
  --coral-700: #C8341F;
  --coral-800: #9C2818;

  /* ---- Navy / ink scale ---- */
  --navy-950: #0F1524;    /* = --hp-ink */
  --navy-900: #022338;    /* = --hp-navy */
  --navy-800: #06344E;
  --navy-700: #0B4A6B;
  --navy-600: #14618A;
  --navy-500: #2F7BA3;
  --navy-300: #8FB7CC;
  --navy-100: #DCE8EF;
  --navy-50:  #EFF4F7;

  /* ---- Warm sand scale ---- */
  --sand-100: #F3EEE3;
  --sand-200: #E5D8BF;
  --sand-300: #CCB68B;    /* = --hp-sand */
  --sand-500: #B59A66;

  /* ---- Sage scale ---- */
  --sage-100: #E7F1EF;
  --sage-200: #C7DEDA;
  --sage-300: #9FC4C0;    /* = --hp-sage */
  --sage-500: #6FA29C;

  /* ---- Neutral / paper scale ---- */
  --paper:     #F5F6F7;   /* = --hp-paper */
  --paper-200: #ECEEF0;
  --paper-300: #DFE2E6;
  --gray-400:  #B9BFC6;
  --gray-500:  #8A929B;
  --gray-600:  #5E6670;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in product UI
     ============================================================ */

  /* Surfaces / backgrounds */
  --surface-page:       var(--paper);
  --surface-card:       var(--hp-white);
  --surface-raised:     var(--hp-white);
  --surface-sunken:     var(--paper-200);
  --surface-inverse:    var(--hp-navy);
  --surface-inverse-2:  var(--hp-ink);
  --surface-brand:      var(--hp-coral);
  --surface-accent-sand:var(--sand-100);
  --surface-accent-sage:var(--sage-100);

  /* Text */
  --text-primary:   var(--hp-navy);
  --text-secondary: color-mix(in srgb, var(--hp-navy) 70%, transparent);
  --text-muted:     color-mix(in srgb, var(--hp-navy) 48%, transparent);
  --text-inverse:   var(--hp-white);
  --text-inverse-secondary: color-mix(in srgb, var(--hp-white) 72%, transparent);
  --text-brand:     var(--hp-coral);
  --text-on-brand:  var(--hp-white);

  /* Brand interaction states */
  --brand:          var(--hp-coral);
  --brand-hover:    var(--coral-600);
  --brand-press:    var(--coral-700);
  --brand-subtle:   var(--coral-50);

  /* Borders & lines */
  --border:         color-mix(in srgb, var(--hp-navy) 12%, transparent);
  --border-strong:  color-mix(in srgb, var(--hp-navy) 22%, transparent);
  --border-inverse: color-mix(in srgb, var(--hp-white) 18%, transparent);
  --divider:        color-mix(in srgb, var(--hp-navy) 8%, transparent);

  /* Focus */
  --focus-ring:     var(--hp-coral);

  /* Functional status (extensions — not in core brand palette) */
  --success:        #2E8B6E;
  --success-bg:     #E3F2EC;
  --warning:        #C99A3C;
  --warning-bg:     #F8EFD9;
  --danger:         var(--coral-700);
  --danger-bg:      var(--coral-50);
  --info:           var(--navy-600);
  --info-bg:        var(--navy-50);
}
/* ============================================================
   Hospitality Prime — Typography Tokens
   ------------------------------------------------------------
   Hierarchy (from Brand Guidelines):
     Neue Montreal Bold   -> titoli principali, grandi headline, sezioni introduttive
     Neue Montreal Medium  -> parole chiave, concetti importanti, titoli secondari
     Neue Montreal Light   -> paragrafi, corpo del testo
     Noto Serif Display Lt -> citazioni, parole chiave nelle headline
     Duplet Bold (+200 tracking, TUTTO MAIUSCOLO) -> CTA e bottoni esclusivamente
   (Font files live in assets/fonts/ — licensed, not substitutes)
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans:  'Neue Montreal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Noto Serif Display', Georgia, 'Times New Roman', serif;
  --font-cta:   'Duplet', 'Neue Montreal', system-ui, sans-serif;

  /* Semantic family aliases */
  --font-display: var(--font-sans);   /* headlines (Medium) */
  --font-body:    var(--font-sans);   /* paragraphs (Regular) */
  --font-quote:   var(--font-serif);  /* citazioni (Light italic) */
  --font-button:  var(--font-cta);    /* CTA labels — Duplet Bold only */

  /* ---- Weights ---- */
  --weight-light:   300;   /* Neue Montreal Light — body / paragrafi */
  --weight-regular: 400;
  --weight-medium:  500;   /* Neue Montreal Medium — keywords / titoli secondari */
  --weight-semibold:600;
  --weight-bold:    700;   /* Neue Montreal Bold — titoli / headline / intro */

  /* ---- Type scale (1.250 major-third-ish, tuned) ---- */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */
  --text-4xl:  3.75rem;   /* 60px */
  --text-5xl:  4.75rem;   /* 76px */

  /* ---- Line heights ---- */
  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-cta:    0.2em;    /* Duplet Bold +200 tracking — sempre uppercase */
  --tracking-eyebrow:0.22em;   /* uppercase eyebrows / labels */

  /* ---- Semantic roles ---- */
  --display-weight: var(--weight-bold);    /* Neue Montreal Bold — h1, grandi titoli */
  --heading-weight: var(--weight-medium);  /* Neue Montreal Medium — h2/h3, keyword */
  --body-weight:    var(--weight-medium);  /* Neue Montreal Medium — paragrafi */
}
/* ============================================================
   Hospitality Prime — Spacing, Radii, Shadows, Motion
   4px base spacing grid.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-32:  8rem;     /* 128 */

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-6);
  --section-y: var(--space-24);

  /* ---- Corner radii ----
     Brand collateral (cards, buttons) use generous, friendly
     rounding; the business cards read ~16–20px. */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---- Shadows ---- (soft, low-opacity navy) */
  --shadow-xs: 0 1px 2px rgba(2, 35, 56, 0.06);
  --shadow-sm: 0 2px 6px rgba(2, 35, 56, 0.08);
  --shadow-md: 0 8px 24px rgba(2, 35, 56, 0.10);
  --shadow-lg: 0 18px 48px rgba(2, 35, 56, 0.14);
  --shadow-brand: 0 12px 30px rgba(253, 93, 72, 0.28);

  /* ---- Motion ---- (calm, confident; no bounce) */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --duration-fast: 140ms;   /* @kind other */
  --duration-base: 220ms;   /* @kind other */
  --duration-slow: 380ms;   /* @kind other */
}
/* ============================================================
   Hospitality Prime — Base element styles & type helpers
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }

h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Type role helpers ---- */
.hp-eyebrow {
  font-family: var(--font-cta);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
}

.hp-display {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(2.5rem, 5vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.hp-lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.hp-quote {
  font-family: var(--font-quote);
  font-weight: var(--weight-light);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-style: italic;
  color: var(--text-primary);
}

.hp-keyword {
  font-weight: var(--weight-bold);
  color: var(--text-brand);
}

/* CTA label treatment — Duplet Bold, +200 tracking, TUTTO MAIUSCOLO */
.hp-cta-label {
  font-family: var(--font-cta);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
}

::selection { background: var(--coral-200); color: var(--hp-navy); }