/* =============================================================
   monkey-tokens.css — Monkey OS product tokens, SCOPED to `.mk`
   -------------------------------------------------------------
   Values copied from the Monkey OS repo
   (apps/console/src/app/tokens.css, 2026-09-19): themes
   "monkey" (indigo), "dark" (black) and "light" (warm).
   Everything is namespaced `--mk-*` and only defined on `.mk`
   so nothing leaks into the portfolio chrome.
   Switch theme with `data-mk-theme="indigo|black|light"`; the page-level
   `html[data-mo-theme]` drives every non-fixed `.mk` before JS runs.
   ============================================================= */

.mk,
.mk[data-mk-theme="indigo"],
html[data-mo-theme="indigo"] .mk:not(.mk-fixed) {
  --mk-bg-canvas: #080C1D;
  --mk-bg-sidebar: #0E1226;
  --mk-surface-raised: #1B1834;
  --mk-surface-hover: #1E213A;
  --mk-surface-elevated: #221F3D;
  --mk-surface-control: #221E44;
  --mk-surface-selected: #250F46;
  --mk-surface-quiet: #332F5C;
  --mk-surface-inverse: #AAACF1;

  --mk-text-primary: #FAFAFA;
  --mk-text-secondary: #C8C8C8;
  --mk-text-tertiary: #8E93B4;
  --mk-text-on-inverse: #080C1D;

  --mk-border-subtle: #1F233C;
  --mk-border-default: #272B46;
  --mk-border-strong: #333757;
  --mk-border-focus: #C97FFF;

  --mk-accent: #AAACF1;
  --mk-accent-soft: #250F46;
  --mk-brand: #8F00D8;
  --mk-link: #878DEA;

  --mk-success: #6cc48b;
  --mk-info: #7aa7e0;
  --mk-warning: #e0a86a;
  --mk-danger: #e5707e;
  --mk-editing: #B79AE0;

  --mk-elevation: 0 8px 24px rgba(3, 4, 16, 0.70);
  --mk-glow: rgba(143, 0, 216, 0.45);
}

.mk[data-mk-theme="black"],
html[data-mo-theme="black"] .mk:not(.mk-fixed) {
  --mk-bg-canvas: #141415;
  --mk-bg-sidebar: #181818;
  --mk-surface-raised: #212121;
  --mk-surface-hover: #1f1f20;
  --mk-surface-elevated: #28282b;
  --mk-surface-control: #313131;
  --mk-surface-selected: #252526;
  --mk-surface-quiet: #444447;
  --mk-surface-inverse: #f0f0f0;

  --mk-text-primary: #f0f0f0;
  --mk-text-secondary: #b7b7b7;
  --mk-text-tertiary: #9a9a9a;
  --mk-text-on-inverse: #141415;

  --mk-border-subtle: #232324;
  --mk-border-default: #2e2e30;
  --mk-border-strong: #3a3a3d;
  --mk-border-focus: #f0f0f0;

  --mk-accent: #f0f0f0;
  --mk-accent-soft: #252526;
  --mk-brand: #A733F0;
  --mk-link: #7aa7e0;

  --mk-success: #6cc48b;
  --mk-info: #7aa7e0;
  --mk-warning: #e0a86a;
  --mk-danger: #e5707e;
  --mk-editing: #B79AE0;

  --mk-elevation: 0 8px 24px rgba(0, 0, 0, 0.65);
  --mk-glow: rgba(240, 240, 240, 0.16);
}

.mk[data-mk-theme="light"],
html[data-mo-theme="light"] .mk:not(.mk-fixed) {
  --mk-bg-canvas: #f7f6f2;
  --mk-bg-sidebar: #efeee8;
  --mk-surface-raised: #ffffff;
  --mk-surface-hover: #e6e5dd;
  --mk-surface-elevated: #ffffff;
  --mk-surface-control: #dcdbd2;
  --mk-surface-selected: #dcdad0;
  --mk-surface-quiet: #dcdbd2;
  --mk-surface-inverse: #26251e;

  --mk-text-primary: #26251e;
  --mk-text-secondary: #55544c;
  --mk-text-tertiary: #5d5c54;
  --mk-text-on-inverse: #f7f6f2;

  --mk-border-subtle: #e6e5dd;
  --mk-border-default: #cfcec4;
  --mk-border-strong: #b3b2a6;
  --mk-border-focus: #26251e;

  --mk-accent: #26251e;
  --mk-accent-soft: #dcdad0;
  --mk-brand: #7A00B8;
  --mk-link: #2c68b4;

  --mk-success: #1d7355;
  --mk-info: #2c68b4;
  --mk-warning: #8a5a12;
  --mk-danger: #c0264b;
  --mk-editing: #4b4ca6;

  --mk-elevation: 0 8px 24px rgba(38, 37, 30, 0.12);
  --mk-glow: rgba(247, 246, 242, 0.22);
}

/* Shared structural tokens (same in every theme — from tokens.css /
   tokens-agents.css; sizes are Figma frame literals, like the source). */
.mk {
  --mk-font: var(--font-text, 'Geist', sans-serif);
  --mk-mono: var(--font-mono, 'Geist Mono', monospace);
  --mk-radius-sm: 6px;
  --mk-radius-md: 8px;
  --mk-radius-lg: 12px;
  --mk-space-1: 4px;
  --mk-space-2: 8px;
  --mk-space-3: 12px;
  --mk-space-4: 16px;
  --mk-space-6: 24px;
  --mk-fs-xs: 11px;
  --mk-fs-sm: 12px;
  --mk-fs-md: 13px;
  --mk-fs-lg: 14px;
  --mk-dot: 6px;
  --mk-frame-w: 1280px;
  --mk-frame-h: 800px;
  --mk-sidebar-w: 236px;
  --mk-panel-w: 244px;
  --mk-col-w: 180px;
  --mk-duration: 240ms;
}