/*
 * Modern Hospitality brand tokens for the web.
 * Section 1 is transcribed from the brand guideline (source/mh-brand-guidelines.pdf) and is
 * generated from tokens.json; do not edit values there by hand.
 * Section 2 is working defaults the guideline does not specify. See brand.md, "Working defaults".
 *
 * Fonts: both families are on Google Fonts.
 *   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Homemade+Apple&display=swap" rel="stylesheet">
 * Self-hosting: fonts/outfit/Outfit-VariableFont_wght.ttf, fonts/homemade-apple/HomemadeApple-Regular.ttf.
 */

/* ---------- 1. From the guideline ---------- */
:root {
  --mh-color-navy: #1D2553;
  --mh-color-gold: #A7934C;
  --mh-color-cream: #FFF5E5;
  --mh-color-khaki: #D5CAB8;
  --mh-color-deep-black: #070A16;

  /* Secondary swatches: guideline p.15, darkest to lightest. */
  --mh-color-navy-swatch-1: #070A16;
  --mh-color-navy-swatch-2: #171E42;
  --mh-color-navy-swatch-3: #1D2553;
  --mh-color-navy-swatch-4: #4A5175;
  --mh-color-navy-swatch-5: #A5A8BA;
  --mh-color-gold-swatch-1: #433B1E;
  --mh-color-gold-swatch-2: #86763D;
  --mh-color-gold-swatch-3: #A7934C;
  --mh-color-gold-swatch-4: #B9A970;
  --mh-color-gold-swatch-5: #DCD4B7;
  --mh-color-cream-swatch-1: #CCC4B7;
  --mh-color-cream-swatch-2: #F2E7D5;
  --mh-color-cream-swatch-3: #FFF5E5;
  --mh-color-cream-swatch-4: #FFF9EF;
  --mh-color-cream-swatch-5: #FFFBF5;
  --mh-color-khaki-swatch-1: #80796E;
  --mh-color-khaki-swatch-2: #AAA293;
  --mh-color-khaki-swatch-3: #D5CAB8;
  --mh-color-khaki-swatch-4: #DDD5C6;
  --mh-color-khaki-swatch-5: #FFF5E5;
  --mh-color-deep-black-swatch-1: #070A16;
  --mh-color-deep-black-swatch-2: #393B45;
  --mh-color-deep-black-swatch-3: #6A6C73;
  --mh-color-deep-black-swatch-4: #9C9DA2;
  --mh-color-deep-black-swatch-5: #CDCED0;

  --mh-font-family-core: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mh-font-family-highlight: "Homemade Apple", "Bradley Hand", cursive;

  --mh-font-size-paragraph-l: 18px;
  --mh-font-size-paragraph-m: 16px;
  --mh-font-size-paragraph-s: 14px;
  --mh-font-size-caption-l: 13px;
  --mh-font-size-caption-m: 11px;
  --mh-font-size-heading-1: 92px;
  --mh-font-size-heading-2: 73px;
  --mh-font-size-heading-3: 59px;
  --mh-font-size-heading-4: 47px;
  --mh-font-size-heading-5: 38px;
  --mh-font-size-heading-6: 30px;
  --mh-font-size-heading-7: 24px;

  --mh-line-height-paragraph: 1.5;
  --mh-line-height-heading-large: 1.2; /* Heading 1-3 */
  --mh-line-height-heading-small: 1.3; /* Heading 4-7 */
}

/* ---------- 2. Working defaults (not in the guideline) ---------- */
:root {
  --mh-font-weight-heading: 500;
  --mh-font-weight-body: 300;
  --mh-font-weight-label: 400;
  --mh-tracking-caption: 0.18em; /* uppercase captions and eyebrows only */

  --mh-space-1: 4px;
  --mh-space-2: 8px;
  --mh-space-3: 12px;
  --mh-space-4: 16px;
  --mh-space-5: 24px;
  --mh-space-6: 32px;
  --mh-space-7: 48px;
  --mh-space-8: 64px;
  --mh-space-9: 96px;
  --mh-space-10: 128px;

  --mh-radius-none: 0;      /* photos, panels, cards */
  --mh-radius-pill: 999px;  /* buttons */
  --mh-line-width: 1px;     /* supporting lines */
  --mh-container: 1200px;
}

/* Surfaces: set one on a section and its text and line colors follow. */
.mh-surface-cream      { background: var(--mh-color-cream);      color: var(--mh-color-deep-black); --mh-heading: var(--mh-color-deep-black); --mh-accent: var(--mh-color-gold-swatch-2); --mh-line: rgba(7, 10, 22, 0.18); }
.mh-surface-navy       { background: var(--mh-color-navy);       color: var(--mh-color-cream);      --mh-heading: var(--mh-color-cream);      --mh-accent: var(--mh-color-gold);          --mh-line: rgba(255, 245, 229, 0.22); }
.mh-surface-deep-black { background: var(--mh-color-deep-black); color: var(--mh-color-cream);      --mh-heading: var(--mh-color-gold);     --mh-accent: var(--mh-color-gold);          --mh-line: rgba(255, 245, 229, 0.18); }
/* Gold takes large type only: cream on gold is 2.8:1. */
.mh-surface-gold     { background: var(--mh-color-gold);     color: var(--mh-color-cream);      --mh-heading: var(--mh-color-cream);      --mh-accent: var(--mh-color-cream);           --mh-line: rgba(255, 245, 229, 0.35); }

.mh-heading   { font-family: var(--mh-font-family-core); font-weight: var(--mh-font-weight-heading); text-transform: uppercase; line-height: var(--mh-line-height-heading-large); color: var(--mh-heading); }
.mh-highlight { font-family: var(--mh-font-family-highlight); font-weight: 400; text-transform: none; letter-spacing: 0; }
.mh-body      { font-family: var(--mh-font-family-core); font-weight: var(--mh-font-weight-body); font-size: var(--mh-font-size-paragraph-m); line-height: var(--mh-line-height-paragraph); }
.mh-caption   { font-family: var(--mh-font-family-core); font-weight: var(--mh-font-weight-label); font-size: var(--mh-font-size-caption-l); letter-spacing: var(--mh-tracking-caption); text-transform: uppercase; }
.mh-button    { font-family: var(--mh-font-family-core); font-weight: var(--mh-font-weight-label); font-size: var(--mh-font-size-paragraph-s); background: var(--mh-color-gold); color: var(--mh-color-deep-black); border: 0; border-radius: var(--mh-radius-pill); padding: var(--mh-space-3) var(--mh-space-6); }