/* brand.css · the Mass Acceleration brand for the whole app (ONE at / and the company app at /app/): the site's tokens.
   Layer: presentation · Pillar: 05 Marketing & Brand, 06 Technology & Systems · Owner: COO · Rev 0.1 · 2026-10-29 (unified app)
   Consumes: shared/fonts (Outfit Variable, self-hosted: the CSP allows this site only)  Produces: --ma-* tokens on :root,
   black by default (like massacceleration.ai), light with data-theme="light" on <html>; ONE's dark choice is the default.
   The same values as web/portal/css/tokens.css (MA-Brand-Guidelines v5.1; tests/test_unified_brand.py keeps them equal).
   Exact brand HEX only. Status colours keep their meaning: ok = teal, warn = peach, bad = orange. */

@font-face {
  font-family: 'Outfit Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/outfit-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/outfit-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* Brand palette (v5.1) */
  --black: #000000; --white: #FFFFFF;
  --peach: #F2A76A; --orange: #EF7246; --pink: #D84C84; --purple: #A64EB7; --periwinkle: #7079E2; --teal: #4BC5CE;
  --grey-border: #D9D9D9; --grey-border-dark: #333333; --grey-text: #555555; --grey-text-dark: #B3B3B3;

  /* Black theme (default, like the site) */
  color-scheme: dark;
  --ma-bg: var(--black);
  --ma-surface: #111111;
  --ma-surface-2: #1C1C1C;
  --ma-border: var(--grey-border-dark);
  --ma-border-strong: #666666;
  --ma-text: var(--white);
  --ma-text-muted: var(--grey-text-dark);
  --ma-accent: var(--pink);
  --ma-accent-text: var(--black);
  --ma-accent-soft: #2B1420;
  --ma-link: var(--periwinkle);
  --ma-focus: var(--white);
  --ma-ok: var(--teal);
  --ma-ok-soft: #0F2A2C;
  --ma-warn: var(--peach);
  --ma-warn-soft: #2E1F12;
  --ma-bad: var(--orange);
  --ma-bad-soft: #2E1710;
  --ma-info-soft: #1C1C1C;
  --ma-shadow: none;

  --ma-font: 'Outfit Variable', 'Outfit', 'Segoe UI', Arial, sans-serif;
  --ma-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ma-text-xs: 0.8125rem;   /* 13px eyebrow / meta */
  --ma-text-sm: 0.875rem;    /* 14px small */
  --ma-text-md: 1.0625rem;   /* 17px body */
  --ma-text-lg: 1.25rem;     /* 20px h3 */
  --ma-text-xl: 1.75rem;     /* 28px h2 */

  --ma-space-1: 0.25rem;
  --ma-space-2: 0.5rem;
  --ma-space-3: 0.75rem;
  --ma-space-4: 1rem;
  --ma-space-5: 1.5rem;
  --ma-space-6: 2rem;

  --ma-radius: 16px;         /* cards, like the site's panels */
  --ma-radius-sm: 8px;       /* buttons, inputs, nav items */
  --ma-nav-width: 15rem;
  --ma-content-max: 72rem;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ma-bg: var(--white);
  --ma-surface: var(--white);
  --ma-surface-2: #F0F0F0;
  --ma-border: var(--grey-border);
  --ma-border-strong: #8A8A8A;
  --ma-text: var(--black);
  --ma-text-muted: var(--grey-text);
  --ma-accent: var(--purple);
  --ma-accent-text: var(--white);
  --ma-accent-soft: #F1E4F5;
  --ma-link: var(--purple);
  --ma-focus: var(--periwinkle);
  --ma-ok: #0F6B73;
  --ma-ok-soft: #E1F5F7;
  --ma-warn: #8A4A08;
  --ma-warn-soft: #FDEEDF;
  --ma-bad: #B5361B;
  --ma-bad-soft: #FCE7E0;
  --ma-info-soft: #EDEDED;
  --ma-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Logo files: the "light" kit file carries the black name (for light backgrounds), "dark" the white name. */
:root:not([data-theme="light"]) img.logo-light, :root[data-theme="light"] img.logo-dark { display: none; }