/* mkit design tokens. Import once at the app entry, before any component or app CSS.
 *
 * Contract:
 * - Every token carries the `--mk-` prefix so the file can sit beside an app's own variables (flexsiebels' `--color-*`, kit-ui's `--bg-*`) while that app migrates page by page.
 * - Theme: `data-theme="dark"` or `data-theme="light"` on <html>. With no attribute the system preference applies (`prefers-color-scheme`), so "system" is the absence of the attribute, never a third value.
 * - Colour comes from flexsiebels (m/flexsiebels.de `src/lib/styles/variables.css`); the chart and status accents flexsiebels does not define come from kit-ui's accent set. Spacing and type sizes follow kit-ui's scale, the one AgentsView's density is built on.
 * - Components read only these variables. An app re-themes by overriding them on :root, never by editing a component.
 */

:root {
  /* Surfaces, light */
  --mk-bg: #ffffff;
  --mk-bg-2: #f9fafb;
  --mk-bg-3: #f3f4f6;
  --mk-surface: #ffffff;
  --mk-surface-hover: #f3f4f6;
  --mk-overlay: rgba(17, 24, 39, 0.4);

  --mk-border: #e5e7eb;
  --mk-border-strong: #d1d5db;

  --mk-text: #111827;
  --mk-text-2: #4b5563;
  --mk-text-3: #6b7280;
  --mk-text-inverse: #ffffff;

  /* Brand accent, flexsiebels green. --mk-primary is the fill, --mk-primary-ink the text on it, --mk-primary-text the brand on the page's own ground (text, icon, border, ring, stroke) — a brand whose fill is too light to read as text sets the two apart. The text tones are references, so they follow the fill in every theme block until a consumer sets them (m/mkit#165). */
  --mk-primary: #16a34a;
  --mk-primary-hover: #15803d;
  --mk-primary-soft: #dcfce7;
  --mk-primary-ink: #ffffff;
  --mk-primary-text: var(--mk-primary);
  --mk-primary-text-hover: var(--mk-primary-hover);

  /* Semantic accents (flexsiebels) and the chart/status set kit-ui adds */
  --mk-success: #22c55e;
  --mk-warning: #f59e0b;
  --mk-danger: #dc2626;
  --mk-info: #2563eb;
  --mk-purple: #7c3aed;
  --mk-teal: #0891b2;
  --mk-amber: #d97706;

  /* Soft/tinted backgrounds for the semantic accents, 18% mix over --mk-surface (Badge/Chip's ratio). Each resolves per theme through the --mk-surface and accent vars it mixes, so no per-theme block needs its own copy. */
  --mk-success-soft: color-mix(in srgb, var(--mk-success) 18%, var(--mk-surface));
  --mk-warning-soft: color-mix(in srgb, var(--mk-warning) 18%, var(--mk-surface));
  --mk-danger-soft: color-mix(in srgb, var(--mk-danger) 18%, var(--mk-surface));
  --mk-info-soft: color-mix(in srgb, var(--mk-info) 18%, var(--mk-surface));
  --mk-purple-soft: color-mix(in srgb, var(--mk-purple) 18%, var(--mk-surface));

  /* Task states, Obsidian's set (m/mkit#51). The character in `- [c]` is the contract with the markdown file; these are display only, read by `.mk-task` (markdown/tasks.css) in the rendered page and over mEditor's textarea. A consumer re-themes the set here — `--mk-task-font` takes a family, so `"Font Awesome 6 Free"` with `--mk-task-weight: 900` and the codepoints as glyphs draws the kit's icon font instead of these characters. */
  --mk-task-font: var(--mk-font-sans);
  --mk-task-weight: var(--mk-weight-bold);
  --mk-task-ink: var(--mk-text-inverse);
  --mk-task-glyph-todo: "";
  --mk-task-glyph-done: "✓";
  --mk-task-glyph-doing: "/";
  --mk-task-glyph-question: "?";
  --mk-task-glyph-important: "!";
  --mk-task-glyph-cancelled: "×";
  --mk-task-glyph-forwarded: "»";
  --mk-task-glyph-scheduled: "«";
  --mk-task-glyph-star: "★";
  --mk-task-color-todo: var(--mk-text-3);
  --mk-task-color-done: var(--mk-success);
  --mk-task-color-doing: var(--mk-info);
  --mk-task-color-question: var(--mk-purple);
  --mk-task-color-important: var(--mk-danger);
  --mk-task-color-cancelled: var(--mk-text-3);
  --mk-task-color-forwarded: var(--mk-text-2);
  --mk-task-color-scheduled: var(--mk-text-2);
  --mk-task-color-star: var(--mk-amber);

  /* Callouts, `> [!kind] title` (m/mkit#300). The word between the brackets is the contract with the markdown file and the set of kinds is open, so these name the seven `callouts.css` draws plus the neutral default every other kind takes; `.mk-callout` (markdown/callouts.css) reads them and mixes the surface out of the colour. `--mk-callout-font` takes a family, the way `--mk-task-font` does, so an icon font can replace the glyphs. `practice` is ink rather than a signal colour: the firm's own practice is not a warning. */
  --mk-callout-font: var(--mk-font-sans);
  --mk-callout-weight: var(--mk-weight-bold);
  --mk-callout-color-default: var(--mk-text-3);
  --mk-callout-glyph-default: "";
  --mk-callout-color-note: var(--mk-info);
  --mk-callout-glyph-note: "\2139";
  --mk-callout-color-tip: var(--mk-success);
  --mk-callout-glyph-tip: "\2726";
  --mk-callout-color-important: var(--mk-purple);
  --mk-callout-glyph-important: "!";
  --mk-callout-color-warning: var(--mk-warning);
  --mk-callout-glyph-warning: "\26A0";
  --mk-callout-color-caution: var(--mk-danger);
  --mk-callout-glyph-caution: "\2716";
  --mk-callout-color-law: var(--mk-teal);
  --mk-callout-glyph-law: "\00A7";
  --mk-callout-color-practice: var(--mk-text-2);
  --mk-callout-glyph-practice: "\25C6";

  /* Chat bubbles: the human's and the assistant's */
  --mk-bubble-me: #dcfce7;
  --mk-bubble-me-ink: #14532d;
  --mk-bubble-them: #f3f4f6;
  --mk-bubble-them-ink: #111827;

  /* Chart series, in order of use */
  --mk-chart-1: var(--mk-primary-text);
  --mk-chart-2: var(--mk-info);
  --mk-chart-3: var(--mk-purple);
  --mk-chart-4: var(--mk-amber);
  --mk-chart-5: var(--mk-teal);
  --mk-chart-6: var(--mk-danger);

  /* Type. Inter, JetBrains Mono and Symbols Nerd Font Mono (the nerd-glyph fallback behind the mono face) are bundled (fonts.css); the fallbacks keep the metrics close when a consumer skips them. */
  --mk-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mk-font-mono: "JetBrains Mono", "Symbols Nerd Font Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* The desktop scale is kit-ui's, in rem on the browser's 16 px root (11/12/13/14 px; md is the body size); the touch scale below lifts every step for a phone. The root itself is never set (d-ebfc6947): a root of --mk-text-md would scale every rem token a second time. */
  --mk-text-2xs: 0.625rem;
  --mk-text-xs: 0.6875rem;
  --mk-text-sm: 0.75rem;
  --mk-text-md: 0.8125rem;
  --mk-text-lg: 0.875rem;
  --mk-text-xl: 1.125rem;
  --mk-text-2xl: 1.5rem;

  /* Shell chrome scale (d-37be501a): nav items, tree rows and palette rows read --mk-text-nav (14 px desktop, matching --mk-text-lg); section labels, hints and tree meta read --mk-text-nav-meta (12 px desktop, matching --mk-text-sm). The touch override below sets --mk-text-nav explicitly to 1rem, since the touch block already lifts --mk-text-lg to 17 px; --mk-text-nav-meta needs no touch override, since --mk-text-sm's own touch value is already 15 px. */
  --mk-text-nav: var(--mk-text-lg);
  --mk-text-nav-meta: var(--mk-text-sm);

  --mk-weight-normal: 400;
  --mk-weight-medium: 500;
  --mk-weight-semibold: 600;
  --mk-weight-bold: 700;

  --mk-leading-tight: 1.25;
  --mk-leading-normal: 1.5;

  /* Spacing ladder, AgentsView's: 2 4 6 8 12 16 24 32 */
  --mk-space-1: 2px;
  --mk-space-2: 4px;
  --mk-space-3: 6px;
  --mk-space-4: 8px;
  --mk-space-5: 12px;
  --mk-space-6: 16px;
  --mk-space-7: 24px;
  --mk-space-8: 32px;

  --mk-radius-sm: 4px;
  --mk-radius-md: 6px;
  --mk-radius-lg: 8px;
  --mk-radius-xl: 14px;
  --mk-radius-full: 9999px;

  --mk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --mk-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --mk-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);

  --mk-focus-ring: 2px solid var(--mk-primary-text);
  --mk-border-width: 1px;
  --mk-transition-fast: 0.12s;
  --mk-transition-normal: 0.2s;
  --mk-opacity-disabled: 0.5;

  /* Shell geometry */
  --mk-sidebar-w: 260px;
  /* The collapsed width of any icon-strip rail: the sidebar's and the context panel's. */
  --mk-rail-w: 56px;
  --mk-sidebar-rail-w: var(--mk-rail-w);
  /* The second left column's default (m/mkit#120); the layout tree sizes the column inline from `mk:shell.sizes` (m/mkit#141). */
  --mk-sidebar2-w: 260px;
  --mk-context-w: 320px;
  --mk-statusbar-h: 24px;
  --mk-topbar-h: 44px;
  --mk-nav-h: 56px;
  --mk-safe-bottom: env(safe-area-inset-bottom, 0px);
  /* How far BottomNav's raised centre button lifts above the bar. A token and not a local of the nav, so that --mk-nav-clearance reserves the same lift the nav draws. */
  --mk-nav-centre-raise: 22px;
  /* The room BottomNav takes at the viewport's bottom, its raised centre included: what a fixed element of its own adds to `bottom` to sit clear of the nav on a phone (m/mkit#282). */
  --mk-nav-clearance: calc(var(--mk-nav-h) + var(--mk-safe-bottom) + var(--mk-nav-centre-raise));

  /* Login panels (m/mkit#315). One scale and one alignment for the whole sign-in surface: LoginCard and every panel it composes read their type, their alignment, their width and their rhythm from these and from nothing else, so a panel cannot introduce a sixth size or a third alignment of its own. Six type roles — title (the card's heading and RedeemPanel's), label (a field's label and a panel's own lead line), body (prose, inputs, buttons, tabs), hint (a hint, an error, the divider, a counter), link (the forgot link and the footer's), code (PinInput's digits). These are the only supported override of the panels (README § Auth); a consumer sets them on :root or on the card itself. */
  --mk-login-title-size: var(--mk-text-xl);
  --mk-login-title-weight: var(--mk-weight-semibold);
  --mk-login-label-size: var(--mk-text-sm);
  --mk-login-label-weight: var(--mk-weight-medium);
  --mk-login-body-size: var(--mk-text-sm);
  --mk-login-hint-size: var(--mk-text-xs);
  --mk-login-link-size: var(--mk-text-xs);
  --mk-login-link-weight: var(--mk-weight-medium);
  --mk-login-code-size: var(--mk-text-xl);
  /* `start`, `center` or `end`: it feeds `text-align` on the card and the main axis of the two rows narrower than it (the brand mark, the PIN boxes), so one value turns the whole card. */
  --mk-login-align: start;
  --mk-login-width: 360px;
  /* The rhythm is two steps: between the blocks of the card and the rows of a form, and between the lines of one block. */
  --mk-login-gap: var(--mk-space-6);
  --mk-login-gap-tight: var(--mk-space-3);

  /* Breakpoints are documented here for readers; CSS cannot read a custom property inside @media, so components repeat the numbers literally. phone < 768, desktop >= 768. */
  --mk-bp-desktop: 768px;

  --mk-z-sticky: 1020;
  --mk-z-nav: 1021;
  --mk-z-overlay: 1040;
  --mk-z-sheet: 1050;
  --mk-z-popover: 1060;
  --mk-z-tooltip: 1070;

  color-scheme: light;
}

/* Dark values, once as a rule set so both the explicit attribute and the system preference share them. */
:root[data-theme="dark"] {
  --mk-bg: #111827;
  --mk-bg-2: #1f2937;
  --mk-bg-3: #374151;
  --mk-surface: #1f2937;
  --mk-surface-hover: #374151;
  --mk-overlay: rgba(0, 0, 0, 0.6);

  --mk-border: #374151;
  --mk-border-strong: #4b5563;

  --mk-text: #ffffff;
  --mk-text-2: #d1d5db;
  --mk-text-3: #9ca3af;
  --mk-text-inverse: #111827;

  --mk-primary: #22c55e;
  --mk-primary-hover: #16a34a;
  --mk-primary-soft: rgba(34, 197, 94, 0.15);
  --mk-primary-ink: #052e16;

  --mk-success: #4ade80;
  --mk-warning: #fbbf24;
  --mk-danger: #f87171;
  --mk-info: #60a5fa;
  --mk-purple: #a78bfa;
  --mk-teal: #22d3ee;
  --mk-amber: #fbbf24;

  --mk-bubble-me: #14532d;
  --mk-bubble-me-ink: #dcfce7;
  --mk-bubble-them: #1f2937;
  --mk-bubble-them-ink: #f3f4f6;

  --mk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --mk-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
  --mk-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mk-bg: #111827;
    --mk-bg-2: #1f2937;
    --mk-bg-3: #374151;
    --mk-surface: #1f2937;
    --mk-surface-hover: #374151;
    --mk-overlay: rgba(0, 0, 0, 0.6);

    --mk-border: #374151;
    --mk-border-strong: #4b5563;

    --mk-text: #ffffff;
    --mk-text-2: #d1d5db;
    --mk-text-3: #9ca3af;
    --mk-text-inverse: #111827;

    --mk-primary: #22c55e;
    --mk-primary-hover: #16a34a;
    --mk-primary-soft: rgba(34, 197, 94, 0.15);
    --mk-primary-ink: #052e16;

    --mk-success: #4ade80;
    --mk-warning: #fbbf24;
    --mk-danger: #f87171;
    --mk-info: #60a5fa;
    --mk-purple: #a78bfa;
    --mk-teal: #22d3ee;
    --mk-amber: #fbbf24;

    --mk-bubble-me: #14532d;
    --mk-bubble-me-ink: #dcfce7;
    --mk-bubble-them: #1f2937;
    --mk-bubble-them-ink: #f3f4f6;

    --mk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --mk-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
    --mk-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);

    color-scheme: dark;
  }
}

/* Paper reads the light theme whatever the screen showed (m/mkit#115): a browser drops backgrounds by default (`print-color-adjust: economy`), so the dark text tokens would print light on white. The selector mirrors the system-preference rule above, which also covers the explicit attribute, so on specificity it ties both dark blocks and wins on order; a `light` attribute already reads these values. The list is the dark blocks' list, and tokens.test.ts holds the three to one another. */
@media print {
  :root:not([data-theme="light"]) {
    --mk-bg: #ffffff;
    --mk-bg-2: #f9fafb;
    --mk-bg-3: #f3f4f6;
    --mk-surface: #ffffff;
    --mk-surface-hover: #f3f4f6;
    --mk-overlay: rgba(17, 24, 39, 0.4);

    --mk-border: #e5e7eb;
    --mk-border-strong: #d1d5db;

    --mk-text: #111827;
    --mk-text-2: #4b5563;
    --mk-text-3: #6b7280;
    --mk-text-inverse: #ffffff;

    --mk-primary: #16a34a;
    --mk-primary-hover: #15803d;
    --mk-primary-soft: #dcfce7;
    --mk-primary-ink: #ffffff;

    --mk-success: #22c55e;
    --mk-warning: #f59e0b;
    --mk-danger: #dc2626;
    --mk-info: #2563eb;
    --mk-purple: #7c3aed;
    --mk-teal: #0891b2;
    --mk-amber: #d97706;

    --mk-bubble-me: #dcfce7;
    --mk-bubble-me-ink: #14532d;
    --mk-bubble-them: #f3f4f6;
    --mk-bubble-them-ink: #111827;

    --mk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --mk-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --mk-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);

    color-scheme: light;
  }
}

/* Touch scale: a phone reads at 16 px root. kit-ui's own rule, kept so the AgentsView density stays a desktop property and never a phone one. */
@media (hover: none) and (pointer: coarse) {
  :root {
    --mk-text-2xs: 0.75rem;
    --mk-text-xs: 0.875rem;
    --mk-text-sm: 0.9375rem;
    --mk-text-md: 1rem;
    --mk-text-lg: 1.0625rem;
    --mk-text-xl: 1.25rem;
    --mk-text-2xl: 1.75rem;
    --mk-text-nav: 1rem;
  }
}

/* Base. Kept to what every consumer wants and nothing an app would fight: box-sizing, the root font, and native controls inheriting the font so a bare <input> in a page under migration is not the one thing set in Times. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--mk-font-sans);
  line-height: var(--mk-leading-normal);
  color: var(--mk-text);
  background: var(--mk-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-size: var(--mk-text-md);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  opacity: var(--mk-opacity-disabled);
  cursor: not-allowed;
}

code,
pre,
kbd {
  font-family: var(--mk-font-mono);
}

a {
  color: var(--mk-primary-text);
}

:focus-visible {
  outline: var(--mk-focus-ring);
  outline-offset: 1px;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--mk-border-strong);
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: transparent;
}