@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-sans/regular.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/instrument-sans/semibold.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-serif-4/regular.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/source-serif-4/semibold.woff2") format("woff2");
}

/* MYRA design tokens — THE single source of truth (DESIGN.md §1: tokens are law).
   Linked by public/cockpit.html and by the Next app (app/layout.tsx) so every surface draws
   palette, radii, shadows and fonts from this one file. No raw hex in components — if a colour
   is not defined here, it does not ship. Values are the DESIGN.md §1 monochrome editorial palette.
   Type scale (six sizes): 11 / 13 / 15 / 17 / 22 / 28px · weights 400 / 600 · 8px spacing grid.
   Decision 0018 adds ten reviewed personal-accent families while keeping semantic colours stable. */
:root {
  color-scheme: light;
  /* Canvas + text — founder-approved 16 August product frame. */
  --bone: #fcfbff; /* compatibility alias for the palette-aware product page */
  --paper: var(
    --bone
  ); /* DEPRECATED name — use --bone; rename sweep in M-…-04 */
  --page: var(--bone);
  --surface: #ffffff;
  --surface-muted: #f6f7f9;
  --surface-subtle: #fbfbfc;
  --surface-2: var(--surface-muted);
  /* Authored email content must remain faithful while the surrounding app changes theme. */
  --email-canvas: #ffffff;
  --email-ink: #1d1d1f;
  --email-line: #d7d7da;
  --ink: #1d1d1f;
  --ink-soft: #515154;
  --ink-faint: #6e6e73;
  --line: #d7d7da;
  --line-soft: #ececee;
  --control-line: #8e8e93;
  /* Quiet hierarchy for the executive brief. These are aliases of the canonical palette, not
     additional colours: raised work stays white; inset/contextual work uses the soft neutral. */
  --surface-raised: var(--surface);
  --surface-inset: var(--surface-muted);
  /* Semantic states — colour is semantic or absent (muted, never neon) */
  --ok: #3f735d;
  --positive: var(--ok);
  --warn: #7e4e1f;
  --warning: var(--warn);
  --alert: #a84e3b;
  --taupe: #665747; /* brand accent — the "considered / secondary" state (fit FALLBACK verdict) */
  /* Pipeline / stage-chip hues — distinct colours for investor STAGES, job stage/status and entity
     dots. Tokenised so the raw hexes live here (theme.css) instead of drifting inline in cockpit.html. */
  --stage-taupe: #938f85;
  --stage-blue: #3c79b0;
  --stage-purple: #8268c9;
  --stage-teal: #0ea59e;
  --stage-rust: #c2603f;
  --stage-gray: #8a8a8a;
  --stage-rose: #b03c79;
  --stage-teal-bright: #1aa6a6;
  /* Selected personal accent — Violet is the default (Decision 0018). */
  --accent: #5e5ce6;
  --accent-strong: #4543bd;
  --accent-soft: #f0efff;
  --button-bg: #5e5ce6;
  --on-accent: #ffffff;
  --orb-deep: #302a89;
  --accent-light: var(--accent-soft);
  --palette-blue: #2f67d8;
  --palette-coral: #d45135;
  --palette-plum: #8055c7;
  --palette-green: #16795c;
  --palette-gold: #b76d14;
  --palette-navy: #264f91;
  --palette-teal: #087d82;
  --palette-berry: #ab3f65;
  --palette-clay: #9c5b44;
  --palette-violet: #5e5ce6;
  /* Soft neutral fill for hover / selected washes */
  --fill-soft: var(--surface-muted);
  /* DEPRECATED aliases — consumers migrate in the M-…-04 sweep, then these are deleted.
     They were never gradients; the names were wrong, not the values. */
  --grad: var(--ink);
  --grad-soft: var(--fill-soft);
  --teal: var(--accent); /* legacy name retained until the documented rename sweep */
  /* Channel identity glyph colours (data, not decoration) — under review in AUDIT.md */
  --gmail: #9c6f5e;
  --icloud: #6e8198;
  --zoom: #7e7e8c;
  --cal: #8e83a0;
  /* Shape — two radii only: 999px pills, 12px rects (DESIGN.md §1) */
  --radius: 12px;
  --radius-pill: 999px;
  --radius-sm: var(
    --radius
  ); /* DEPRECATED — a third radius does not exist; remove in M-…-04 */
  /* One shadow. Depth comes from hairlines, not shadow stacks. */
  --shadow: 0 1px 2px rgba(29, 29, 31, 0.08), 0 6px 18px rgba(29, 29, 31, 0.035);
  --shadow-lg: var(
    --shadow
  ); /* DEPRECATED — heavy drops collapse to the one shadow */
  /* Instrument Sans runs the interface; Source Serif 4 marks editorial hierarchy.
     Both approved families are self-hosted above; system faces are resilient fallbacks only. */
  --font:
    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  /* Kept as a compatibility alias while legacy selectors are retired. The approved
     interface system uses Instrument Sans for UI, metadata and numerals. */
  --mono: var(--font);
  --serif:
    "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia,
    "Times New Roman", serif;
  --fs-base: 16px;
  --tabbar-h: 56px;
  --dock-h: 60px;
  --shell-header-h: 64px;
  --content-max: 1184px;
  /* Shared rhythm and motion. Component CSS consumes these instead of inventing local values. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --motion-duration: 160ms;
  --motion-easing: ease-out;
  /* Rail width — drives the @myra dock's left offset so it stays in the content column and never
     overlaps the rail. 62px collapsed / 0 mobile are set in cockpit.html. */
  --rail-w: 232px;
}

html,
body {
  background: var(--bone);
  color: var(--ink);
}

/* Optional inverse. Light remains the deliberate default; dark is an exact semantic-token
   inversion, not a second collection of component overrides. Near-black layers retain visible
   separation without glare; focus and selection remain monochrome under Decision 0005. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bone: #0c0c0e;
  --page: var(--bone);
  --surface: #171719;
  --surface-muted: #222225;
  --surface-subtle: #1d1d20;
  --surface-2: var(--surface-muted);
  --ink: #f5f5f7;
  --ink-soft: #c3c3ca;
  --ink-faint: #aaaab0;
  --line: #3a3a3f;
  --line-soft: #2b2b2f;
  --control-line: #696970;
  --surface-raised: var(--surface);
  --surface-inset: var(--surface-muted);
  --ok: #91d8b2;
  --positive: var(--ok);
  --warn: #f2c779;
  --warning: var(--warn);
  --alert: #d47764;
  --taupe: #b4a28e;
  --accent: #aaa8ff;
  --accent-strong: #cfceff;
  --accent-soft: #28274b;
  --button-bg: #aaa8ff;
  --on-accent: #171719;
  --orb-deep: #403994;
  --accent-light: var(--accent-soft);
  --fill-soft: var(--surface-muted);
  --gmail: #c88970;
  --icloud: #8ba4bf;
  --zoom: #a0a0b5;
  --cal: #a79ac2;
  --shadow: none;
}

/* Reviewed personal-accent families. The compatibility key for Violet remains linear-violet. */
html[data-palette="blue"] {
  --accent:#2f67d8;--accent-strong:#234fae;--accent-soft:#edf3ff;--button-bg:#2f67d8;--orb-deep:#173b80;
}
html[data-palette="coral"] {
  --accent:#d45135;--accent-strong:#a53823;--accent-soft:#fff0eb;--button-bg:#a53823;--orb-deep:#7c281b;
}
html[data-palette="plum"] {
  --accent:#8055c7;--accent-strong:#5c379a;--accent-soft:#f4efff;--button-bg:#8055c7;--orb-deep:#432570;
}
html[data-palette="green"] {
  --accent:#16795c;--accent-strong:#0b5b43;--accent-soft:#ebf8f2;--button-bg:#16795c;--orb-deep:#0c4938;
}
html[data-palette="gold"] {
  --accent:#b76d14;--accent-strong:#884d08;--accent-soft:#fff6e6;--button-bg:#884d08;--orb-deep:#633507;
}
html[data-palette="navy"] {
  --accent:#264f91;--accent-strong:#183a70;--accent-soft:#edf2fa;--button-bg:#264f91;--orb-deep:#122d5c;
}
html[data-palette="teal"] {
  --accent:#087d82;--accent-strong:#075d61;--accent-soft:#e9f8f8;--button-bg:#087d82;--orb-deep:#06484d;
}
html[data-palette="berry"] {
  --accent:#ab3f65;--accent-strong:#812945;--accent-soft:#fff0f4;--button-bg:#ab3f65;--orb-deep:#641d37;
}
html[data-palette="clay"] {
  --accent:#9c5b44;--accent-strong:#754130;--accent-soft:#fdf0eb;--button-bg:#9c5b44;--orb-deep:#5b3025;
}
html[data-palette="linear-violet"] {
  --accent:#5e5ce6;--accent-strong:#4543bd;--accent-soft:#f0efff;--button-bg:#5e5ce6;--orb-deep:#302a89;
}

/* Each reviewed light palette owns a very quiet page tint, not only an accent. */
html:not([data-theme="dark"])[data-palette="blue"] { --bone:#fbfcff;--page:var(--bone); }
html:not([data-theme="dark"])[data-palette="coral"] { --bone:#fffdfc;--page:var(--bone); }
html:not([data-theme="dark"])[data-palette="plum"] { --bone:#fdfcff;--page:var(--bone); }
html:not([data-theme="dark"])[data-palette="green"] { --bone:#fbfefc;--page:var(--bone); }
html:not([data-theme="dark"])[data-palette="gold"] { --bone:#fffefb;--page:var(--bone); }
html:not([data-theme="dark"])[data-palette="navy"] { --bone:#fbfcff;--page:var(--bone); }
html:not([data-theme="dark"])[data-palette="teal"] { --bone:#fbfefe;--page:var(--bone); }
html:not([data-theme="dark"])[data-palette="berry"] { --bone:#fffdfd;--page:var(--bone); }
html:not([data-theme="dark"])[data-palette="clay"] { --bone:#fffdfc;--page:var(--bone); }
html:not([data-theme="dark"])[data-palette="linear-violet"] { --bone:#fcfbff;--page:var(--bone); }

html[data-theme="dark"][data-palette="blue"] {
  --accent:#77a7ff;--accent-strong:#b8d1ff;--accent-soft:#172746;--button-bg:#77a7ff;--orb-deep:#1a407f;
}
html[data-theme="dark"][data-palette="coral"] {
  --accent:#ff9b84;--accent-strong:#ffc1b2;--accent-soft:#43221d;--button-bg:#ff9b84;--orb-deep:#7d3326;
}
html[data-theme="dark"][data-palette="plum"] {
  --accent:#bba2ff;--accent-strong:#d7c9ff;--accent-soft:#2e2548;--button-bg:#bba2ff;--orb-deep:#51318d;
}
html[data-theme="dark"][data-palette="green"] {
  --accent:#74d4ad;--accent-strong:#b0edd1;--accent-soft:#15372a;--button-bg:#74d4ad;--orb-deep:#1d6348;
}
html[data-theme="dark"][data-palette="gold"] {
  --accent:#f2be69;--accent-strong:#ffda9b;--accent-soft:#422f13;--button-bg:#f2be69;--orb-deep:#805214;
}
html[data-theme="dark"][data-palette="navy"] {
  --accent:#91baff;--accent-strong:#c4d8ff;--accent-soft:#1e2c48;--button-bg:#91baff;--orb-deep:#244b86;
}
html[data-theme="dark"][data-palette="teal"] {
  --accent:#66d1d4;--accent-strong:#a8edef;--accent-soft:#123739;--button-bg:#66d1d4;--orb-deep:#116269;
}
html[data-theme="dark"][data-palette="berry"] {
  --accent:#f08dac;--accent-strong:#ffbed0;--accent-soft:#42202c;--button-bg:#f08dac;--orb-deep:#7c2949;
}
html[data-theme="dark"][data-palette="clay"] {
  --accent:#e8ae98;--accent-strong:#f7cbb9;--accent-soft:#3f2821;--button-bg:#e8ae98;--orb-deep:#754433;
}
html[data-theme="dark"][data-palette="linear-violet"] {
  --accent:#aaa8ff;--accent-strong:#cfceff;--accent-soft:#28274b;--button-bg:#aaa8ff;--orb-deep:#403994;
}

/* Phone uses the same approved semantic hierarchy; components increase size where needed rather
   than collapsing secondary and primary text into one colour tier. */