/* MissionFit brand tokens. Generated from tokens.json; edit tokens.json, not this file.
   Usage: import this file once at the app root. Colours switch with the OS theme,
   or explicitly with data-theme="light" | "dark" on <html>. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  --mf-surface-100: #f6f7f9;
  --mf-surface-200: #ffffff;
  --mf-ink: #141b33;
  --mf-ink-muted: #4f5873;
  --mf-rule: #c9ceda;
  --mf-brand: #2338a8;
  --mf-on-brand: #ffffff;
  --mf-highlight: #ffe45c;
  --mf-on-highlight: #141b33;
  --mf-verified: #0b7a75;
  --mf-flagged: #b54708;
  --mf-font-display: "Bricolage Grotesque", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --mf-font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --mf-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --mf-space-1: 8px;
  --mf-space-2: 16px;
  --mf-space-3: 32px;
  --mf-space-4: 64px;
  --mf-radius-sm: 4px;
  --mf-radius-md: 10px;
  --mf-radius-pill: 999px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mf-surface-100: #0f1420;
    --mf-surface-200: #171d2b;
    --mf-ink: #eceff7;
    --mf-ink-muted: #a3abc2;
    --mf-rule: #323b52;
    --mf-brand: #8ea2ff;
    --mf-on-brand: #0f1420;
    --mf-highlight: #e5c83a;
    --mf-on-highlight: #141b33;
    --mf-verified: #4fd1c5;
    --mf-flagged: #f5a35c;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --mf-surface-100: #0f1420;
  --mf-surface-200: #171d2b;
  --mf-ink: #eceff7;
  --mf-ink-muted: #a3abc2;
  --mf-rule: #323b52;
  --mf-brand: #8ea2ff;
  --mf-on-brand: #0f1420;
  --mf-highlight: #e5c83a;
  --mf-on-highlight: #141b33;
  --mf-verified: #4fd1c5;
  --mf-flagged: #f5a35c;
  color-scheme: dark;
}

/* Type styles (see BRANDING.md, Typography) */
.mf-display-xl { font-family: var(--mf-font-display); font-size: 64px; line-height: 64px; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.mf-display { font-family: var(--mf-font-display); font-size: 44px; line-height: 48px; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.mf-heading { font-family: var(--mf-font-display); font-size: 26px; line-height: 32px; font-weight: 600; text-wrap: balance; }
.mf-body-lg { font-family: var(--mf-font-sans); font-size: 19px; line-height: 30px; font-weight: 400; }
.mf-body { font-family: var(--mf-font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.mf-small { font-family: var(--mf-font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.mf-label { font-family: var(--mf-font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.mf-source { font-family: var(--mf-font-mono); font-size: 13px; line-height: 18px; font-weight: 500; }

/* Signature device: the source mark (see components.md) */
.mf-highlight { background: var(--mf-highlight); color: var(--mf-on-highlight); border-radius: var(--mf-radius-sm); padding: 0 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mf-source-ref { font-family: var(--mf-font-mono); font-size: 0.7em; font-weight: 500; color: var(--mf-verified); vertical-align: super; line-height: 0; margin-inline-start: 0.15em; }

/* Focus ring */
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--mf-brand); outline-offset: 2px; }