/* ============================================================================
   Marriott Harrison design tokens.
   Copied verbatim from the design-system project
   (_ds/marriott-harrison-design-system-f9b54917.../tokens/*.css) so the app has
   no dependency on that project at runtime. If the design system changes,
   re-copy this file rather than editing values here.
   ========================================================================== */

/* ---------------------------------------------------------------- webfonts --
   Aptos is Microsoft's brand typeface and is not on a public font CDN. Drop the
   .ttf files into ./fonts/ to self-host them (see fonts/README.md). Without
   them the stack falls back to a locally installed Aptos — which most MH
   machines have via Microsoft 365 — and then to system-ui / Segoe UI.        */

@font-face { font-family:"Aptos"; src:local("Aptos Light"),   url("../fonts/Aptos-Light.ttf")     format("truetype"); font-weight:300; font-display:swap }
@font-face { font-family:"Aptos"; src:local("Aptos"),         url("../fonts/Aptos.ttf")           format("truetype"); font-weight:400; font-display:swap }
@font-face { font-family:"Aptos"; src:local("Aptos Italic"),  url("../fonts/Aptos-Italic.ttf")    format("truetype"); font-weight:400; font-style:italic; font-display:swap }
@font-face { font-family:"Aptos"; src:local("Aptos SemiBold"),url("../fonts/Aptos-SemiBold.ttf")  format("truetype"); font-weight:600; font-display:swap }
@font-face { font-family:"Aptos"; src:local("Aptos Bold"),    url("../fonts/Aptos-Bold.ttf")      format("truetype"); font-weight:700; font-display:swap }
@font-face { font-family:"Aptos"; src:local("Aptos ExtraBold"),url("../fonts/Aptos-ExtraBold.ttf")format("truetype"); font-weight:800; font-display:swap }
@font-face { font-family:"Aptos"; src:local("Aptos Black"),   url("../fonts/Aptos-Black.ttf")     format("truetype"); font-weight:900; font-display:swap }
@font-face { font-family:"Aptos Display"; src:local("Aptos Display"),     url("../fonts/Aptos-Display.ttf")     format("truetype"); font-weight:400; font-display:swap }
@font-face { font-family:"Aptos Display"; src:local("Aptos Display Bold"),url("../fonts/Aptos-Display-Bold.ttf")format("truetype"); font-weight:700; font-display:swap }
@font-face { font-family:"Aptos Mono"; src:local("Aptos Mono"),     url("../fonts/Aptos-Mono.ttf")     format("truetype"); font-weight:400; font-display:swap }
@font-face { font-family:"Aptos Mono"; src:local("Aptos Mono Bold"),url("../fonts/Aptos-Mono-Bold.ttf")format("truetype"); font-weight:700; font-display:swap }

:root {
  /* ---- Ink & paper (primary brand base) ---- */
  --mh-black: #000000;
  --mh-white: #ffffff;

  /* ---- Greys (from MH theme dk2 / lt2 + tints) ---- */
  --mh-grey-900: #1a1a1a;
  --mh-grey-800: #2b2d31;
  --mh-grey-700: #54575c;   /* secondary text on white */
  --mh-grey-500: #878787;   /* muted text, captions */
  --mh-grey-400: #c6c6c6;   /* borders, dividers */
  --mh-grey-200: #ececec;   /* subtle fills */
  --mh-grey-100: #f5f5f4;   /* app canvas */

  /* ---- Blue accent family ---- */
  --mh-blue: #00a0de;
  --mh-blue-deep: #1b4f9e;
  --mh-blue-pale: #badde5;
  --mh-blue-link: #0563c1;

  /* ---- Olive highlight ---- */
  --mh-olive: #8d983e;

  /* ---- Semantic status ---- */
  --mh-success: #8d983e;
  --mh-danger:  #c0392b;
  --mh-warning: #d9992b;
  --mh-info:    #00a0de;

  /* Soft status fills, taken from the Badge component's palette */
  --mh-success-soft: #eaeed2; --mh-success-ink: #5c651f;
  --mh-danger-soft:  #f7e3e1; --mh-danger-ink:  #8f2318;
  --mh-warning-soft: #faf0dc; --mh-warning-ink: #8a5f14;

  /* ---- Semantic aliases ---- */
  --surface-page:    var(--mh-grey-100);
  --surface-card:    var(--mh-white);
  --surface-inverse: var(--mh-black);
  --surface-subtle:  var(--mh-grey-200);
  --surface-accent:  var(--mh-blue-pale);

  --text-strong:  var(--mh-black);
  --text-body:    var(--mh-grey-900);
  --text-muted:   var(--mh-grey-700);
  --text-subtle:  var(--mh-grey-500);
  --text-inverse: var(--mh-white);
  --text-link:    var(--mh-blue-link);
  --text-accent:  var(--mh-blue-deep);

  --border-strong:  var(--mh-black);
  --border-default: var(--mh-grey-400);
  --border-subtle:  var(--mh-grey-200);

  --accent-primary:   var(--mh-black);
  --accent-secondary: var(--mh-blue);
  --focus-ring:       var(--mh-blue);

  /* ---- Typography ---- */
  --font-display: "Aptos Display", "Aptos", system-ui, sans-serif;
  --font-sans:    "Aptos", system-ui, "Segoe UI", sans-serif;
  --font-mono:    "Aptos Mono", ui-monospace, "SF Mono", monospace;

  --fw-light:300; --fw-regular:400; --fw-semibold:600;
  --fw-bold:700;  --fw-extrabold:800; --fw-black:900;

  --lh-tight:1.05; --lh-snug:1.2; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tight:-0.02em; --ls-wide:0.04em; --ls-overline:0.14em;

  /* ---- Spacing, radii, shadows, motion ---- */
  --space-1:0.25rem; --space-2:0.5rem;  --space-3:0.75rem; --space-4:1rem;
  --space-5:1.5rem;  --space-6:2rem;    --space-7:3rem;    --space-8:4rem;

  --radius-none:0; --radius-sm:2px; --radius-md:4px; --radius-lg:8px; --radius-pill:999px;
  --border-hairline:1px; --border-medium:2px;

  --shadow-xs:0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 12px 32px rgba(0,0,0,.12);

  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
}