/* MPT design system — tokens.css
   Shared theming contract consumed by /app (Telegram Mini App) and / (site).
   Names here are LOCK-IN: /design/tokens.css must keep exactly these. */

/* ---- Density: spacing scale ------------------------------------------------ */
html[data-density="compact"]  { --sp-1: 2px;  --sp-2: 4px;  --sp-3: 6px;  --sp-4: 8px;  --sp-5: 12px; --sp-6: 16px; }
html[data-density="default"]  { --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; }
html[data-density="spacious"] { --sp-1: 6px;  --sp-2: 12px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; }
html:not([data-density])      { --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; }

/* ---- Radius ---------------------------------------------------------------- */
html[data-radius="sharp"]   { --radius-sm: 1px;  --radius-md: 3px;  --radius-lg: 5px;  --radius-pill: 999px; }
html[data-radius="default"] { --radius-sm: 6px;  --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; }
html[data-radius="soft"]    { --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; }
html[data-radius="round"]   { --radius-sm: 14px; --radius-md: 20px; --radius-lg: 26px; --radius-pill: 999px; }
html:not([data-radius])     { --radius-sm: 6px;  --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; }

/* ---- Typography ------------------------------------------------------------ */
/* Brand default: Manrope (display) + Inter (body), self-hosted in fonts.css.
   data-font overrides let users pick system, sans-only or serif display. */
html:not([data-font]),
html[data-font="brand"] {
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html[data-font="system"] {
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-family);
}
html[data-font="sans"] {
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html[data-font="serif"] {
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", Charter, serif;
}

:root {
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --type-xs: 12px;
  --type-sm: 14px;
  --type-base: 16px;
  --type-md: 18px;
  --type-lg: 22px;
  --type-xl: 28px;
  --type-2xl: 38px;
  --type-3xl: 52px;

  /* ---- Extended surfaces / textures (settings dialect) ------------------- */
  /* Derived from the base palette via color-mix, so they follow the active
     theme (incl. custom accent) automatically at use time. */
  --surface-2: color-mix(in srgb, var(--surface) 86%, var(--text));
  --surface-3: color-mix(in srgb, var(--surface) 74%, var(--text));
  --faint: var(--status-queued);
  --line-strong: color-mix(in srgb, var(--line) 100%, var(--text) 10%);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --link: #8AB8FF;
  --glow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
          0 0 16px color-mix(in srgb, var(--accent) 30%, transparent);
  --font-body: var(--font-family);

  --transition: 160ms ease;
  --shadow-sm: 0 1px 2px rgba(12, 13, 18, 0.35);
  --shadow-md: 0 6px 16px rgba(12, 13, 18, 0.5);
  --shadow-lg: 0 16px 48px rgba(12, 13, 18, 0.6);
}

/* ---- Base palette: dark «control room», lime accent ----------------------- */
:root,
html[data-theme="dark"] {
  --bg: #0C0D12;
  --surface: #15181F;
  --text: #E7EAF1;
  --muted: #9BA3B0;
  --line: rgba(231, 234, 241, 0.10);
  --accent: #BFE84B;
  --accent-bright: #CDF25F;
  --on-accent: #0C0D12;
  --ok: #4ADE80;
  --warn: #FFC24B;
  --err: #FF6B6B;
  --status-queued: #8B93A3;
  --status-running: #BFE84B;
  --status-done: #4ADE80;
  --status-failed: #FF6B6B;
  --status-cancelled: #9BA3B0;
}

/* Light variant kept for the customizer — lime-tinted, same family */
html[data-theme="light"] {
  --bg: #F5F6F2;
  --surface: #FFFFFF;
  --text: #1A1D22;
  --muted: #5D656F;
  --line: #E4E7DE;
  --accent: #7EB11F;
  --accent-bright: #8FC422;
  --on-accent: #0C0D12;
  --ok: #1E9E6A;
  --warn: #B47A10;
  --err: #D64545;
  --status-queued: #6B7280;
  --status-running: #7EB11F;
  --status-done: #1E9E6A;
  --status-failed: #D64545;
  --status-cancelled: #5D656F;
}

/* ---- Custom theme (customizer). theme.js always sets --custom-* on the
   <html> inline style when data-custom="on", so the fallbacks below are
   only a safety net and never needed for value-dependent cycles. ------ */
html[data-custom="on"] {
  --bg: var(--custom-bg, var(--bg));
  --surface: var(--custom-surface, var(--surface));
  --text: var(--custom-text, var(--text));
  --muted: var(--custom-muted, var(--muted));
  --accent: var(--custom-accent, var(--accent));
  --radius-sm: calc(var(--custom-radius, var(--radius-md)) * 0.6);
  --radius-md: var(--custom-radius, var(--radius-md));
  --radius-lg: calc(var(--custom-radius, var(--radius-md)) * 1.5);
}

/* ---- Motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}