/* Protokol 3.1 — tokeny */
:root {
  --canvas: #ffffff; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #f2f2f2; --surface-selected: #e5e5e5;
  --ink: #0d0d0d; --ink-muted: #626262; --ink-faint: #a3a3a3;
  --rule: #e9e9e9; --rule-control: #8a8a8a; --rule-strong: var(--ink);
  --signal: #1f569c; --on-signal: #ffffff; --signal-fill: #247de0; --signal-wash: #e8f0fa; --signal-edge: rgba(36, 125, 224, 0.45);
  --status-warn: #9a5b00; --status-error: #d4163f;
  --inverse: #0d0d0d; --on-inverse: #ffffff;
  --scrim: rgba(13, 13, 13, 0.3);
  --shadow-overlay: 0 8px 30px rgba(0, 0, 0, 0.18);
  --progress-fill: linear-gradient(90deg, #5c9ee6, #247de0);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-code: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 80px;
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; --radius-round: 999px;
  --stroke-hairline: 1px; --stroke-focus: 2px; --stroke-icon: 1.2;
  --index-width: 224px; --panel-width: 560px; --content-max: 1280px; --measure: 64ch;
  --row-height: 44px; --row-height-compact: 36px; --control-height: 38px; --control-height-small: 32px;
  --motion-fast: 150ms; --motion-panel: 200ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #181818; --surface: #222222; --surface-raised: #222222; --surface-sunken: #2c2c2c; --surface-selected: #3e3e3e;
    --ink: #f5f5f5; --ink-muted: #a6a6a6; --ink-faint: #5e5e5e;
    --rule: #333333; --rule-control: #777777; --rule-strong: var(--ink);
    --signal: #86b3e0; --on-signal: #181818; --signal-fill: #5c9ee6; --signal-wash: #1f2b38; --signal-edge: rgba(92, 158, 230, 0.45);
    --status-warn: #f0a43a; --status-error: #ff6b6b;
    --inverse: #f5f5f5; --on-inverse: #181818;
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-overlay: 0 8px 30px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #181818; --surface: #222222; --surface-raised: #222222; --surface-sunken: #2c2c2c; --surface-selected: #3e3e3e;
  --ink: #f5f5f5; --ink-muted: #a6a6a6; --ink-faint: #5e5e5e;
  --rule: #333333; --rule-control: #777777; --rule-strong: var(--ink);
  --signal: #86b3e0; --on-signal: #181818; --signal-fill: #5c9ee6; --signal-wash: #1f2b38; --signal-edge: rgba(92, 158, 230, 0.45);
  --status-warn: #f0a43a; --status-error: #ff6b6b;
  --inverse: #f5f5f5; --on-inverse: #181818;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 8px 30px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* Typografické štýly */
.title { font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; }
.lead { font-family: var(--font-sans); font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
.heading { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; }
.body { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.01em; }
.body-strong { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; }
.small { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.micro { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; }
.data { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; font-variant-numeric: tabular-nums; }
.code { font-family: var(--font-code); font-size: 12px; line-height: 18px; font-weight: 400; }