/* Multipolitan Design System — Foundations
   Source: Multipolitan.fig + brand guidelines. Tobias + Saans typefaces,
   four-environment color theory (Mare / Cosmos / Verdant / Terra). */

@font-face {
  font-family: "Saans";
  src: url("./fonts/Saans-TRIAL-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saans";
  src: url("./fonts/Saans-TRIAL-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saans";
  src: url("./fonts/Saans-TRIAL-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saans";
  src: url("./fonts/Saans-TRIAL-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tobias";
  src: url("./fonts/Tobias-TRIAL-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Type families ──────────────────────────────────────────── */
  --font-sans: "Saans", "Söhne", "Inter", system-ui, sans-serif;
  --font-serif: "Tobias", "GT Sectra", "Tiempos Headline", Georgia, serif;
  --font-mono: "TG Frekuent Mono", "JetBrains Mono", ui-monospace, monospace;

  /* ── Neutral surfaces (core canvas system) ──────────────────── */
  --ink: rgb(23, 22, 20);          /* Onyx — primary text, dark surfaces */
  --ink-2: rgb(35, 31, 32);        /* Onyx softened — body text on light */
  --bone: rgb(253, 253, 249);      /* Bone — primary light surface */
  --bone-2: rgb(251, 249, 247);    /* Bone-2 — alternate surface, cards */
  --bone-3: rgb(251, 250, 244);    /* Bone-3 — translucent overlays */
  --paper: rgb(241, 239, 234);     /* Paper — secondary surface */
  --sand: rgb(233, 231, 226);      /* Sand — page mockups, mid-tone */
  --stone: rgb(201, 197, 190);     /* Stone — hairlines, dividers */
  --mute: rgb(143, 138, 133);      /* Mute — secondary text */
  --pure-white: rgb(255, 255, 255);
  --pure-black: rgb(0, 0, 0);

  /* ── Four-environment palette ───────────────────────────────── */
  /* Terra — clay/terracotta. Warm human accent. Buttons, CTAs, tags. */
  --terra: rgb(183, 63, 12);
  --terra-tint: rgb(239, 215, 205);

  /* Cosmos — indigo/night sky. Authority, expertise, links. */
  --cosmos: rgb(95, 121, 229);
  --cosmos-tint: rgb(232, 240, 255);
  --cosmos-tint-2: rgb(231, 241, 255);

  /* Verdant — green. Outcome, cleared, approval (semantic positive). */
  --verdant: rgb(44, 88, 55);
  --verdant-tint: rgb(240, 242, 187);
  --verdant-tint-2: rgb(239, 242, 216);

  /* Mare — teal/ocean. Movement, passage. Reserved supporting tone. */
  --mare: rgb(105, 151, 192);
  --mare-tint: rgb(213, 232, 238);
  --mare-deep: rgb(34, 49, 59);

  /* Semantic */
  --danger: rgb(216, 0, 39);
  --warning: rgb(254, 68, 0);
  --info: var(--cosmos);
  --success: var(--verdant);

  /* ── Semantic role tokens ───────────────────────────────────── */
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--mute);
  --fg-inverse: var(--bone);
  --bg-1: var(--bone);
  --bg-2: var(--bone-2);
  --bg-3: var(--paper);
  --bg-inverse: var(--ink);
  --border: var(--stone);
  --link: var(--cosmos);
  --accent: var(--terra);

  /* ── Radii ──────────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 40px;        /* mega cards, hero panels */
  --r-pill: 9999px;

  /* ── Spacing scale (4-base) ─────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ── Shadow / elevation (low, calm) ─────────────────────────── */
  --shadow-1: 0 1px 2px rgba(23, 22, 20, 0.04);
  --shadow-2: 0 2px 8px rgba(23, 22, 20, 0.06);
  --shadow-3: 0 12px 32px rgba(23, 22, 20, 0.10);
  --hairline: 1px solid var(--stone);

  /* ── Motion ─────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* ── Type scale (display follows the Figma 160 / 110 / 75 / 49 / 37 / 32 / 28 / 22 / 17 ladder) ─ */
.t-display-xl  { font-family: var(--font-sans);  font-weight: 400; font-size: 160px; line-height: 0.91; letter-spacing: -0.020em; }
.t-display-l   { font-family: var(--font-sans);  font-weight: 400; font-size: 110px; line-height: 1.00; letter-spacing: -0.010em; }
.t-display-m   { font-family: var(--font-sans);  font-weight: 700; font-size:  75px; line-height: 0.96; letter-spacing: -0.020em; }
.t-serif-xl    { font-family: var(--font-serif); font-weight: 400; font-size:  64px; line-height: 1.00; letter-spacing: -0.020em; }
.t-serif-l     { font-family: var(--font-serif); font-weight: 400; font-size:  49px; line-height: 1.00; letter-spacing: -0.020em; }
.t-serif-m     { font-family: var(--font-serif); font-weight: 400; font-size:  37px; line-height: 1.10; letter-spacing: -0.020em; }
.t-serif-s     { font-family: var(--font-serif); font-weight: 400; font-size:  28px; line-height: 1.10; letter-spacing: -0.020em; }
.t-h1          { font-family: var(--font-sans);  font-weight: 500; font-size:  48px; line-height: 1.05; letter-spacing: -0.015em; }
.t-h2          { font-family: var(--font-sans);  font-weight: 500; font-size:  32px; line-height: 1.10; letter-spacing: -0.010em; }
.t-h3          { font-family: var(--font-sans);  font-weight: 500; font-size:  22px; line-height: 1.15; letter-spacing: -0.005em; }
.t-h4          { font-family: var(--font-sans);  font-weight: 500; font-size:  17px; line-height: 1.20; }
.t-body-l      { font-family: var(--font-sans);  font-weight: 400; font-size:  17px; line-height: 1.45; }
.t-body        { font-family: var(--font-sans);  font-weight: 400; font-size:  15px; line-height: 1.45; }
.t-body-s      { font-family: var(--font-sans);  font-weight: 400; font-size:  13px; line-height: 1.40; letter-spacing: 0.005em; }
.t-caption     { font-family: var(--font-sans);  font-weight: 400; font-size:  11px; line-height: 1.25; letter-spacing: 0.010em; }
.t-overline    { font-family: var(--font-sans);  font-weight: 500; font-size:  11px; line-height: 1.00; letter-spacing: 0.080em; text-transform: uppercase; }
.t-mono        { font-family: var(--font-mono);  font-weight: 300; font-size:  12px; line-height: 1.20; letter-spacing: 0.020em; }

/* ── Element defaults ──────────────────────────────────────────── */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1 { font: 500 48px/1.05 var(--font-sans); letter-spacing: -0.015em; margin: 0; }
h2 { font: 500 32px/1.10 var(--font-sans); letter-spacing: -0.010em; margin: 0; }
h3 { font: 500 22px/1.15 var(--font-sans); letter-spacing: -0.005em; margin: 0; }
h4 { font: 500 17px/1.20 var(--font-sans); margin: 0; }
p  { margin: 0; }
a  { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Utility */
.surface-ink    { background: var(--ink); color: var(--bone); }
.surface-bone   { background: var(--bone); color: var(--ink); }
.surface-paper  { background: var(--paper); color: var(--ink); }
.surface-sand   { background: var(--sand); color: var(--ink); }