/* M1 design tokens 1.1.0
   Shared single source of truth for M1 Agentur and M1 Academy.
   Canonical contract: /design/m1agentur/M1_DESIGN.md (section "Design Tokens").

   Tier 1 - palette: fixed brand values. Never themed, never used directly by components.
   Tier 2 - roles:   the only color names components use. Light values live on :root,
                     dark values on [data-theme="dark"]. Channels (--m1-rgb-*) carry roles
                     that need alpha: rgb(var(--m1-rgb-slate) / .16).

   Consumers copy this file byte-identically and pin its SHA-256; edit it only here. */

:root {
  /* Tier 1 - palette (light) */
  --m1-palette-canvas: #f4f4f1;
  --m1-palette-white: #ffffff;
  --m1-palette-warm: #f7f5f0;
  --m1-palette-paper: #fffefa;
  --m1-palette-paper-muted: #f3f1ec;
  --m1-palette-band: #ececeb;
  --m1-palette-frame: #dedfdd;
  --m1-palette-patch: #eef2ef;
  --m1-palette-patch-interactive: #e1ebe7;
  --m1-palette-hover-soft: #e5e5e2;
  --m1-palette-selection: #dac7a7;
  --m1-palette-portrait: #d7d1c7;
  --m1-palette-ink: #050505;
  --m1-palette-body: #686868;
  --m1-palette-navy: #232f52;
  --m1-palette-teal-fill: #1fb7a6;
  --m1-palette-teal-text: #0d796f;
  --m1-palette-rust: #a6512e;
  --m1-palette-signal: #127a70;
  --m1-palette-meter-canvas: #111516;
  --m1-palette-meter-ink: #f7f5ed;
  --m1-palette-meter-muted: #e4e2db;
  --m1-palette-meter-outline: #e9e7df;
  --m1-palette-mint: #a2f7db;
  --m1-palette-mint-hover: #c5ffe9;
  --m1-palette-on-mint: #102820;
  --m1-palette-ok: #047857;
  --m1-palette-warn: #b7791f;
  --m1-palette-danger: #dc2626;

  /* Tier 1 - palette (night) */
  --m1-palette-night-canvas: #15191c;
  --m1-palette-night-surface: #202629;
  --m1-palette-night-patch: #293336;
  --m1-palette-night-patch-interactive: #344043;
  --m1-palette-night-hover: #2b3437;
  --m1-palette-night-selection: #36534f;
  --m1-palette-night-ink: #f4f4f1;
  --m1-palette-night-body: #b9bfbd;
  --m1-palette-night-navy: #d7e4e1;
  --m1-palette-night-rust: color-mix(in srgb, #a6512e 55%, #f4f4f1);
  --m1-palette-night-ok: #34d399;
  --m1-palette-night-warn: #d69e2e;
  --m1-palette-night-danger: #f87171;

  /* Tier 2 - roles (light) */
  color-scheme: light;
  --m1-color-canvas: var(--m1-palette-canvas);
  --m1-color-surface: var(--m1-palette-white);
  --m1-color-surface-warm: var(--m1-palette-warm);
  --m1-color-paper: var(--m1-palette-paper);
  --m1-color-paper-muted: var(--m1-palette-paper-muted);
  --m1-color-band: var(--m1-palette-band);
  --m1-color-band-strong: var(--m1-palette-frame);
  --m1-color-patch: var(--m1-palette-patch);
  --m1-color-patch-interactive: var(--m1-palette-patch-interactive);
  --m1-color-hover-soft: var(--m1-palette-hover-soft);
  --m1-color-frame: var(--m1-palette-frame);
  --m1-color-proof-frame: var(--m1-palette-band);
  --m1-color-selection: var(--m1-palette-selection);
  --m1-color-portrait: var(--m1-palette-portrait);
  --m1-color-text-veil: var(--m1-palette-warm);
  --m1-color-ink: var(--m1-palette-ink);
  --m1-color-body: var(--m1-palette-body);
  --m1-color-navy: var(--m1-palette-navy);
  --m1-color-teal-fill: var(--m1-palette-teal-fill);
  --m1-color-teal-text: var(--m1-palette-teal-text);
  --m1-color-rust: var(--m1-palette-rust);
  --m1-color-line: rgb(var(--m1-rgb-ink) / .16);
  --m1-color-line-strong: rgb(var(--m1-rgb-slate) / .52);
  --m1-color-on-ink: var(--m1-palette-white);
  --m1-color-on-action: var(--m1-palette-ink);
  --m1-color-ink-fixed: var(--m1-palette-ink);
  --m1-color-on-ink-fixed: var(--m1-palette-white);
  --m1-color-signal-fixed: var(--m1-palette-signal);
  --m1-color-meter-canvas-fixed: var(--m1-palette-meter-canvas);
  --m1-color-meter-ink-fixed: var(--m1-palette-meter-ink);
  --m1-color-meter-muted-fixed: var(--m1-palette-meter-muted);
  --m1-color-meter-outline-fixed: var(--m1-palette-meter-outline);
  --m1-color-mint-fixed: var(--m1-palette-mint);
  --m1-color-mint-hover-fixed: var(--m1-palette-mint-hover);
  --m1-color-on-mint-fixed: var(--m1-palette-on-mint);
  --m1-color-ok: var(--m1-palette-ok);
  --m1-color-ok-soft: rgb(4 120 87 / .12);
  --m1-color-warn: var(--m1-palette-warn);
  --m1-color-warn-soft: rgb(183 121 31 / .12);
  --m1-color-danger: var(--m1-palette-danger);
  --m1-color-danger-soft: rgb(220 38 38 / .10);

  /* Tier 2 - channels (light) */
  --m1-rgb-ink: 5 5 5;
  --m1-rgb-slate: 22 36 45;
  --m1-rgb-shade: 22 36 45;
  --m1-rgb-body: 104 104 104;
  --m1-rgb-highlight: 255 255 255;
  --m1-rgb-veil: 247 245 240;
  --m1-rgb-teal: 31 183 166;
  --m1-rgb-on-ink-fixed: 255 255 255;
}

[data-theme="dark"] {
  /* Tier 2 - roles (dark) */
  color-scheme: dark;
  --m1-color-canvas: var(--m1-palette-night-canvas);
  --m1-color-surface: var(--m1-palette-night-surface);
  --m1-color-surface-warm: var(--m1-palette-night-canvas);
  --m1-color-paper: var(--m1-palette-night-surface);
  --m1-color-paper-muted: var(--m1-palette-night-patch);
  --m1-color-band: var(--m1-palette-night-canvas);
  --m1-color-band-strong: var(--m1-palette-night-canvas);
  --m1-color-patch: var(--m1-palette-night-patch);
  --m1-color-patch-interactive: var(--m1-palette-night-patch-interactive);
  --m1-color-hover-soft: var(--m1-palette-night-hover);
  --m1-color-frame: rgb(255 255 255 / .18);
  --m1-color-proof-frame: rgb(255 255 255 / .12);
  --m1-color-selection: var(--m1-palette-night-selection);
  --m1-color-ink: var(--m1-palette-night-ink);
  --m1-color-body: var(--m1-palette-night-body);
  --m1-color-navy: var(--m1-palette-night-navy);
  --m1-color-teal-text: var(--m1-palette-teal-fill);
  --m1-color-text-veil: transparent;
  --m1-color-rust: var(--m1-palette-night-rust);
  --m1-color-line: rgb(255 255 255 / .16);
  --m1-color-line-strong: rgb(255 255 255 / .52);
  --m1-color-on-ink: var(--m1-palette-night-canvas);
  --m1-color-ok: var(--m1-palette-night-ok);
  --m1-color-ok-soft: rgb(52 211 153 / .14);
  --m1-color-warn: var(--m1-palette-night-warn);
  --m1-color-warn-soft: rgb(214 158 46 / .12);
  --m1-color-danger: var(--m1-palette-night-danger);
  --m1-color-danger-soft: rgb(248 113 113 / .14);

  /* Tier 2 - channels (dark) */
  --m1-rgb-ink: 244 244 241;
  --m1-rgb-slate: 244 244 241;
  --m1-rgb-shade: 0 0 0;
  --m1-rgb-body: 185 191 189;
  --m1-rgb-highlight: 32 38 41;
  --m1-rgb-veil: 21 25 28;
}