/* ============================================================
   EHM — Effective Hospitality Management
   Colors & Type foundations
   Primary: #25485b (Slate)  ·  #FFFFFF  ·  Accent: #D0B52B (Gold)
   Type: Palermo (display, self-hosted) · Cormorant Garamond (serif, CDN) · Aptos (sans, self-hosted)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* Palermo — EHM brand display serif (the logo wordmark). Self-hosted, single weight. */
@font-face {
  font-family: 'Palermo';
  src: url('fonts/Palermo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Aptos — EHM brand UI / body sans (the tagline). Self-hosted. */
@font-face {
  font-family: 'Aptos';
  src: url('fonts/Aptos.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND CORE ---------- */
  --ehm-slate:      #25485b;   /* primary */
  --ehm-gold:       #d0b52b;   /* accent  */
  --ehm-white:      #ffffff;

  /* ---------- SLATE SCALE ---------- */
  --slate-950: #0f2530;
  --slate-900: #152c38;
  --slate-800: #1b3848;
  --slate-700: #1f3f50;
  --slate-600: #25485b;  /* brand primary */
  --slate-500: #3a6075;
  --slate-400: #5a7c8f;
  --slate-300: #8aa4b1;
  --slate-200: #b9cad3;
  --slate-100: #dde6ea;
  --slate-50:  #f1f5f7;

  /* ---------- GOLD SCALE ---------- */
  --gold-700: #8f7a14;
  --gold-600: #a8901c;   /* AA-safe gold text on white */
  --gold-500: #d0b52b;   /* brand accent */
  --gold-400: #ddc857;
  --gold-300: #e8d883;
  --gold-200: #f1e7b4;
  --gold-100: #f8f2d8;
  --gold-50:  #fcf9ec;

  /* ---------- NEUTRALS (warm-cool) ---------- */
  --ink-900: #14222a;
  --ink-700: #33454e;
  --ink-500: #5d6f78;
  --ink-300: #97a6ad;
  --paper:   #ffffff;
  --paper-2: #f6f8f9;   /* off-white section bg */
  --paper-3: #eef2f4;
  --line:    #dde4e8;   /* hairline borders */
  --line-2:  #c7d2d8;

  /* ---------- SEMANTIC SURFACES ---------- */
  --fg-1: var(--slate-950);   /* primary text on light */
  --fg-2: var(--ink-700);     /* secondary text */
  --fg-3: var(--ink-500);     /* muted text / captions */
  --fg-onslate-1: #ffffff;    /* primary text on slate */
  --fg-onslate-2: #c2d2da;    /* secondary text on slate */
  --fg-onslate-3: #8aa4b1;    /* muted text on slate */
  --bg-1: var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: var(--paper-3);
  --bg-slate: var(--slate-600);
  --bg-slate-deep: var(--slate-900);
  --accent: var(--gold-500);
  --accent-ink: var(--gold-600);

  /* ---------- STATUS ---------- */
  --success: #2f7d5b;
  --success-bg: #e6f1ec;
  --warning: #b8860b;
  --warning-bg: #f8f0d8;
  --danger:  #a8413a;
  --danger-bg: #f6e7e5;
  --info:    var(--slate-500);
  --info-bg: var(--slate-50);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Palermo', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-serif:   'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-sans:    'Aptos', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- TYPE SCALE (fluid-friendly) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   21px;
  --text-xl:   26px;
  --text-2xl:  33px;
  --text-3xl:  42px;
  --text-4xl:  54px;
  --text-5xl:  68px;
  --text-6xl:  88px;

  --leading-tight: 1.1;
  --leading-snug:  1.28;
  --leading-normal:1.55;
  --leading-loose: 1.75;

  --tracking-display: 0.10em;   /* Palermo caps want air */
  --tracking-wide:    0.18em;   /* eyebrows / labels  */
  --tracking-normal:  0.005em;
  --tracking-tight:  -0.01em;

  /* ---------- RADII ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---------- SPACING (8pt base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- SHADOWS (cool, restrained) ---------- */
  --shadow-xs: 0 1px 2px rgba(21, 44, 56, 0.06);
  --shadow-sm: 0 2px 6px rgba(21, 44, 56, 0.08);
  --shadow-md: 0 8px 24px rgba(21, 44, 56, 0.10);
  --shadow-lg: 0 20px 48px rgba(21, 44, 56, 0.14);
  --shadow-gold: 0 8px 24px rgba(208, 181, 43, 0.28);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   ============================================================ */

.ehm-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-ink);
}

.ehm-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-1);
}

.ehm-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ehm-h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.ehm-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-1);
}

.ehm-lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.ehm-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.ehm-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

.ehm-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* A short gold rule, echoing the logo's flanking lines */
.ehm-rule {
  display: inline-block;
  width: 56px;
  height: 2px;
  background: var(--accent);
  border: 0;
}