/* MultiTaction brand tokens.
   Values come from brand/tokens.json in the brand kit (mtbrand build 2026-10-13).
   Role switching is adapted to this app: dark is the default set, and
   data-theme="light" on <html> switches every role to the light set.
   Write colours and sizes as var(--mt-...) references. Do not type hexes into pages. */

:root {
    /* Ink ramp */
    --mt-ink-950: #0C0F17;
    --mt-ink-900: #151922;
    --mt-ink-800: #292E37;
    --mt-ink-700: #434851;
    --mt-ink-600: #66696F;
    --mt-ink-500: #83868D;
    --mt-ink-400: #A1A5AB;
    --mt-ink-300: #C1C4CB;
    --mt-ink-200: #DADEE5;
    --mt-ink-100: #EBEFF6;
    --mt-ink-50: #F7FAFF;

    /* Brand colours */
    --mt-brand-magenta: #E6007E;
    --mt-brand-magenta-on-dark: #FF3D9E;
    --mt-brand-magenta-on-light: #C2006A;
    --mt-brand-blue: #36A9E1;
    --mt-brand-blue-on-light: #1B6FA3;
    --mt-brand-purple: #550F55;
    --mt-brand-dark-blue: #00386E;
    --mt-brand-black: #000000;
    --mt-brand-white: #FFFFFF;

    /* Semantic colours */
    --mt-semantic-dark-success: #3DDC97;
    --mt-semantic-dark-warning: #FFB454;
    --mt-semantic-dark-error: #FF6B6B;
    --mt-semantic-light-success: #0F7B4F;
    --mt-semantic-light-warning: #8A5A00;
    --mt-semantic-light-error: #C62828;

    /* Type */
    --mt-font-sans: "Archivo", Arial, sans-serif;
    --mt-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
    --mt-font-size-display: 56px;
    --mt-font-size-h1: 36px;
    --mt-font-size-h2: 28px;
    --mt-font-size-h3: 22px;
    --mt-font-size-body: 17px;
    --mt-font-size-ui: 14px;
    --mt-font-size-caption: 12.8px;
    --mt-font-size-legal: 11.5px;
    --mt-font-weight-wordmark-heavy: 800;
    --mt-font-weight-wordmark-light: 300;
    --mt-font-weight-display: 700;
    --mt-font-weight-heading: 650;
    --mt-font-weight-body: 400;
    --mt-font-weight-ui-strong: 600;
    --mt-font-weight-eyebrow: 500;
    --mt-font-width-wordmark: 112%;
    --mt-font-width-display: 112%;
    --mt-font-width-body: 100%;
    --mt-font-width-ui: 94%;
    --mt-font-width-osd: 80%;
    --mt-font-line-height-body: 1.5;
    --mt-font-line-height-heading: 1.2;
    --mt-font-line-height-display: 1.05;
    --mt-font-tracking-eyebrow: 0.14em;
    --mt-font-tracking-label: 0.1em;

    /* Space and radii */
    --mt-space-1: 4px;
    --mt-space-2: 8px;
    --mt-space-3: 12px;
    --mt-space-4: 16px;
    --mt-space-6: 24px;
    --mt-space-8: 32px;
    --mt-space-12: 48px;
    --mt-space-16: 64px;
    --mt-radius-card: 6px;
    --mt-radius-pill: 999px;
    --mt-radius-tile: 22%;

    /* Roles, dark set (default) */
    --mt-surface: #151922;
    --mt-surface-deep: #0C0F17;
    --mt-surface-raised: #292E37;
    --mt-border: #434851;
    --mt-text: #DADEE5;
    --mt-text-muted: #A1A5AB;
    --mt-text-strong: #F7FAFF;
    --mt-heading: #36A9E1;
    --mt-accent: #E6007E;
    --mt-on-accent: #FFFFFF;
    --mt-accent-text: #FF3D9E;
    --mt-accent-2: #36A9E1;
    --mt-tint: #550F55;
    --mt-tint-2: #00386E;
    --mt-success: #3DDC97;
    --mt-warning: #FFB454;
    --mt-error: #FF6B6B;
    --mt-focus: #FF3D9E;
    color-scheme: dark;
}

[data-theme="light"] {
    --mt-surface: #F7FAFF;
    --mt-surface-deep: #FFFFFF;
    --mt-surface-raised: #EBEFF6;
    --mt-border: #C1C4CB;
    --mt-text: #151922;
    --mt-text-muted: #434851;
    --mt-text-strong: #0C0F17;
    --mt-heading: #550F55;
    --mt-accent: #C2006A;
    --mt-on-accent: #FFFFFF;
    --mt-accent-text: #C2006A;
    --mt-accent-2: #1B6FA3;
    --mt-tint: #550F55;
    --mt-tint-2: #00386E;
    --mt-success: #0F7B4F;
    --mt-warning: #8A5A00;
    --mt-error: #C62828;
    --mt-focus: #C2006A;
    color-scheme: light;
}