/* Šifrohraní — generováno z tokens.json */
:root, [data-theme="light"] {
  --paper: #F4F1E8;
  --paper-raised: #FFFFFF;
  --ink: #1A1F1C;
  --ink-muted: #4A524D;
  --forest: #1F4D3A;
  --forest-deep: #163828;
  --trail: #E8702A;
  --trail-text: #A9471A;
  --ink-on-trail: #1A1F1C;
  --action: #1F4D3A;
  --action-hover: #163828;
  --on-action: #FFFFFF;
  --line: #D8D2C2;
  --line-strong: #7A8079;
  --focus-ring: #C85A1A;
  --correct: #1F7A4A;
  --correct-soft: #E3F1E8;
  --wrong: #B3261E;
  --wrong-soft: #F8E1DF;
  --hint: #2B5C8A;
  --hint-soft: #E2ECF6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141A17;
    --paper-raised: #1E2622;
    --ink: #EEF1EC;
    --ink-muted: #B4BEB7;
    --forest: #A9D8BC;
    --forest-deep: #C6E6D3;
    --trail: #E8702A;
    --trail-text: #F29A5E;
    --ink-on-trail: #1A1F1C;
    --action: #7CC49C;
    --action-hover: #9AD4B2;
    --on-action: #0F1A14;
    --line: #2E3833;
    --line-strong: #6E7A73;
    --focus-ring: #E8702A;
    --correct: #8FD6A8;
    --correct-soft: #183325;
    --wrong: #F2B8B5;
    --wrong-soft: #3A1E1C;
    --hint: #9CC3E8;
    --hint-soft: #1A2A3A;
  }
}
[data-theme="dark"] {
  --paper: #141A17;
  --paper-raised: #1E2622;
  --ink: #EEF1EC;
  --ink-muted: #B4BEB7;
  --forest: #A9D8BC;
  --forest-deep: #C6E6D3;
  --trail: #E8702A;
  --trail-text: #F29A5E;
  --ink-on-trail: #1A1F1C;
  --action: #7CC49C;
  --action-hover: #9AD4B2;
  --on-action: #0F1A14;
  --line: #2E3833;
  --line-strong: #6E7A73;
  --focus-ring: #E8702A;
  --correct: #8FD6A8;
  --correct-soft: #183325;
  --wrong: #F2B8B5;
  --wrong-soft: #3A1E1C;
  --hint: #9CC3E8;
  --hint-soft: #1A2A3A;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --tap-min: 52px;
  --content-max: 560px;
  --logo-min: 24px;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
}
.display-xl { font-family: var(--font-sans); font-size: 64px; line-height: 60px; font-weight: 900; letter-spacing: -1.5px; }
.display-l { font-family: var(--font-sans); font-size: 44px; line-height: 46px; font-weight: 900; letter-spacing: -1px; }
.h1 { font-family: var(--font-sans); font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -0.5px; }
.h2 { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 700; }
.h3 { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 700; }
.body-l { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.code-l { font-family: var(--font-mono); font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: 2px; }
.code { font-family: var(--font-mono); font-size: 20px; line-height: 28px; font-weight: 600; }
.timer { font-family: var(--font-mono); font-size: 32px; line-height: 36px; font-weight: 700; }