/* Brand fonts: Inter for body/UI, P22 Mackinac Pro for headlines. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "P22 Mackinac Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/P22Mackinac-Bold.otf") format("opentype");
}
@font-face {
  font-family: "P22 Mackinac Pro";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/P22Mackinac-BoldItalic.otf") format("opentype");
}

:root {
  --white: #fff;
  --gray-50: #f7f7f7;
  --gray-100: #efefef;
  --gray-200: #dedede;
  --gray-300: #c9c9c9;
  --gray-500: #777;
  --gray-700: #333;
  --gray-850: #191919;
  --black: #000;

  /* Monark brand palette */
  --teal-500: #007f8f;
  --teal-400: #0396a8;
  --mteal-400: #81bbc2;
  --mteal-300: #b3d6da;
  --mteal-250: #c1dee1;
  --mteal-200: #d1e6e9;
  --mteal-100: #e1efef;
  --mteal-50: #f1f7f7;
  --ocean-400: #a0cbcb;
  --midnight: #395966;
  --midnight-300: #617a85;
  --watermelon: #ec7161;
  --watermelon-100: #fdf1ef;
  --watermelon-300: #f9d4d0;
  --peach: #ffa37a;
  --yellow-400: #fcbe1f;
  --yellow-300: #ffd25e;

  /* Modern neutrals (2024) */
  --bg-grey: #f4f4f4;
  --light-grey-200: #d9d9d9;
  --light-grey-400: #8d8d8d;
  --aluminium: #808284;
  --panel-grey: #ededed;

  --accent: var(--yellow-400);
  --on-accent: var(--midnight);
  --danger: var(--watermelon);
  --danger-strong: #d9543f;
  --danger-strong-hover: #bf4733;
  --danger-soft: rgba(236, 113, 97, .14);

  --radius: 18px;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-head: "P22 Mackinac Pro", Georgia, "Times New Roman", serif;
  font-family: var(--font-body);
}

h1, h2, h3, .mcp-header h1, .modal h2 {
  font-family: var(--font-head);
  font-weight: 700;
}

* { box-sizing: border-box; }
*::selection { background: var(--accent); color: var(--on-accent); }

body {
  --bg: var(--bg-grey);
  --panel: var(--white);
  --panel-2: var(--panel-grey);
  --line: var(--light-grey-200);
  --text: var(--midnight);
  --muted: var(--midnight-300);
  --placeholder: var(--muted);
  --danger-soft: var(--watermelon-100);
  margin: 0;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}