/* DKSPACE design system tokens + components. Generated verbatim from "DKspace Design System/tokens/" (claude.ai/design project b2a78996).
   Neupravuj ručne: pri zmene design systemu prekopíruj tokens/{colors,typography,spacing,motion,base,components}.css. */

/* ===== tokens/colors.css ===== */
:root{
/* Neutrals — "Ink" and "Paper" anchor the scale */
--ink:#16181D;          /* Ink — primary text, dark surface */
--ink-700:#383C44;
--ink-500:#666C76;      /* secondary text on paper — 4.7:1 AA */
--ink-400:#878D99;      /* disabled / hints, non-text only */
--ink-300:#B2B6BE;      /* secondary text on ink — 8.9:1 */
--ink-200:#D6D9DE;      /* borders on paper */
--ink-150:#E4E6EA;      /* hairlines */
--ink-100:#EBEDF0;      /* raised surface on paper */
--paper:#F4F5F7;        /* Paper — default background */
--white:#FFFFFF;        /* cards on paper */
/* Accent — exactly one: Signal (ultramarine) */
--signal:#2F4DE0;       /* on paper 5.9:1 AA */
--signal-deep:#2038B0;  /* hover/pressed */
--signal-bright:#97A8FF;/* accent text/strokes on ink — 8.1:1 */
--signal-tint:#E4E8FB;  /* selection, subtle fills */
/* Dark surface */
--surface-dark:var(--ink);
--surface-dark-raised:#1F2229;
--border-on-dark:#31353E;
/* Semantic — muted, never neon */
--ok:#2E7D5C;           /* on paper 4.6:1 */
--warn:#8F6414;         /* on paper 4.8:1 */
--error:#B0402C;        /* on paper 5.3:1 */
--ok-tint:#E2EFE9;--warn-tint:#F3ECDD;--error-tint:#F6E4E0;
/* Semantic aliases */
--text-body:var(--ink);
--text-secondary:var(--ink-500);
--text-on-dark:var(--paper);
--text-secondary-on-dark:var(--ink-300);
--text-accent:var(--signal);
--surface-page:var(--paper);
--surface-card:var(--white);
--surface-raised:var(--ink-100);
--border-default:var(--ink-200);
--border-hairline:var(--ink-150);
--border-strong:var(--ink);
--focus-ring:var(--signal);
}

/* ===== tokens/typography.css ===== */
:root{
--font-display:'Space Grotesk',system-ui,sans-serif;
--font-body:'IBM Plex Sans',system-ui,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,monospace;
/* Type scale — px sizes, unitless line-heights, tracking */
--text-display-1:64px; /* @kind font */
--lh-display-1:1.05; /* @kind other */
--ls-display-1:-0.02em; /* @kind other */
--text-display-2:44px; /* @kind font */
--lh-display-2:1.1; /* @kind other */
--ls-display-2:-0.015em; /* @kind other */
--text-title:32px; /* @kind font */
--lh-title:1.15; /* @kind other */
--ls-title:-0.01em; /* @kind other */
--text-heading:24px; /* @kind font */
--lh-heading:1.25; /* @kind other */
--ls-heading:0; /* @kind other */
--text-body-lg:18px; /* @kind font */
--lh-body-lg:1.6; /* @kind other */
--text-body:16px; /* @kind font */
--lh-body:1.6; /* @kind other */
--text-body-sm:14px; /* @kind font */
--lh-body-sm:1.55; /* @kind other */
--text-caption:13px; /* @kind font */
--lh-caption:1.4; /* @kind other */
--text-kicker:12px; /* @kind font */
--lh-kicker:1.2; /* @kind other */
--ls-kicker:0.14em; /* @kind other */
--text-code:14px; /* @kind font */
--lh-code:1.6; /* @kind other */
--weight-display:500; /* @kind other */
--weight-body:400; /* @kind other */
--weight-medium:500; /* @kind other */
--weight-semibold:600; /* @kind other */
}
/* ===== tokens/spacing.css ===== */
:root{
/* Spacing — 4px base */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
/* Layout */
--container-max:1160px;--container-prose:720px;--grid-gutter:24px;--page-margin:24px;
/* Radii — derived from logo elbows (elbow radius ≈ ½ stroke) */
--radius-1:4px;   /* checkboxes, code inline */
--radius-2:8px;   /* buttons, inputs, tags */
--radius-3:12px;  /* cards, dialogs */
--radius-round:999px; /* pills */
/* Elevation — borders first; one shadow level, dialogs/toasts only */
--shadow-overlay:0 8px 24px rgba(22,24,29,.14);
--shadow-none:none;
/* Brackets — signature element */
--bracket-stroke:2px;--bracket-size:28px;--bracket-radius:2px;
}

/* ===== tokens/motion.css ===== */
:root{
--dur-fast:120ms; /* @kind other */ /* hover, press */
--dur-base:200ms; /* @kind other */ /* state changes, fades */
--dur-slow:320ms; /* @kind other */ /* reveals, dialogs */
--ease-focus:cubic-bezier(.3,0,.15,1); /* @kind other */ /* default */
--ease-exit:cubic-bezier(.5,0,.8,.4); /* @kind other */
--reveal-stagger:60ms; /* @kind other */
}
/* ===== tokens/base.css ===== */
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
::selection{background:var(--signal-tint);color:var(--ink)}
a{color:var(--text-body);text-decoration:underline;text-decoration-color:var(--ink-300);text-underline-offset:3px;transition:text-decoration-color var(--dur-fast) var(--ease-focus)}
a:hover{text-decoration-color:var(--signal)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* Bracket utility — the signature viewfinder corners.
   Usage: <div class="dk-frame"><i></i><i></i><i></i><i></i> …content… </div> */
.dk-frame{position:relative}
.dk-frame>i{position:absolute;width:var(--bracket-size);height:var(--bracket-size);border:0 solid currentColor;pointer-events:none}
.dk-frame>i:nth-child(1){top:0;left:0;border-top-width:var(--bracket-stroke);border-left-width:var(--bracket-stroke);border-top-left-radius:var(--bracket-radius)}
.dk-frame>i:nth-child(2){top:0;right:0;border-top-width:var(--bracket-stroke);border-right-width:var(--bracket-stroke);border-top-right-radius:var(--bracket-radius)}
.dk-frame>i:nth-child(3){bottom:0;left:0;border-bottom-width:var(--bracket-stroke);border-left-width:var(--bracket-stroke);border-bottom-left-radius:var(--bracket-radius)}
.dk-frame>i:nth-child(4){bottom:0;right:0;border-bottom-width:var(--bracket-stroke);border-right-width:var(--bracket-stroke);border-bottom-right-radius:var(--bracket-radius)}

/* ===== tokens/components.css ===== */
/* Component classes — consume tokens only. JSX wrappers in components/ apply these. */
.dk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font:500 15px/1 var(--font-body);border-radius:var(--radius-2);border:1px solid transparent;cursor:pointer;padding:0 20px;height:44px;text-decoration:none;transition:background var(--dur-fast) var(--ease-focus),color var(--dur-fast) var(--ease-focus),border-color var(--dur-fast) var(--ease-focus),transform var(--dur-fast) var(--ease-focus)}
.dk-btn:active{transform:scale(.98)}
.dk-btn:disabled{background:var(--ink-200);color:var(--ink-500);border-color:transparent;cursor:not-allowed;transform:none}
.dk-btn--primary{background:var(--signal);color:#fff}
.dk-btn--primary:hover:not(:disabled){background:var(--signal-deep)}
.dk-btn--secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.dk-btn--secondary:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.dk-btn--ghost{background:transparent;color:var(--ink)}
.dk-btn--ghost:hover:not(:disabled){background:var(--ink-100)}
.dk-btn--inverse{background:transparent;color:var(--paper);border-color:var(--paper)}
.dk-btn--inverse:hover:not(:disabled){background:var(--paper);color:var(--ink)}
.dk-btn--sm{height:36px;padding:0 14px;font-size:14px}
.dk-btn--lg{height:52px;padding:0 28px;font-size:16px}
.dk-link{color:var(--signal);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color var(--dur-fast) var(--ease-focus)}
.dk-link:hover{text-decoration-color:var(--signal)}
.dk-link--quiet{color:var(--ink);text-decoration-color:var(--ink-300)}
.dk-link--quiet:hover{text-decoration-color:var(--signal);color:var(--signal)}
.dk-label{display:block;font:500 14px/1.4 var(--font-body);color:var(--ink);margin-bottom:6px}
.dk-input,.dk-select,.dk-textarea{width:100%;box-sizing:border-box;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-2);padding:10px 12px;font:400 15px/1.5 var(--font-body);color:var(--ink);transition:border-color var(--dur-fast) var(--ease-focus),box-shadow var(--dur-fast) var(--ease-focus)}
.dk-input::placeholder,.dk-textarea::placeholder{color:var(--ink-400)}
.dk-input:hover,.dk-select:hover,.dk-textarea:hover{border-color:var(--ink-400)}
.dk-input:focus,.dk-select:focus,.dk-textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px var(--signal-tint)}
.dk-input:disabled,.dk-select:disabled,.dk-textarea:disabled{background:var(--ink-100);color:var(--ink-400);cursor:not-allowed}
.dk-select{appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316181D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.dk-textarea{min-height:96px;resize:vertical}
.dk-hint{font:400 13px/1.4 var(--font-body);color:var(--text-secondary);margin-top:6px}
.dk-field--error .dk-input,.dk-field--error .dk-select,.dk-field--error .dk-textarea{border-color:var(--error)}
.dk-field--error .dk-hint{color:var(--error)}
.dk-check{display:flex;align-items:flex-start;gap:10px;font:400 15px/1.5 var(--font-body);color:var(--ink);cursor:pointer}
.dk-check input{accent-color:var(--signal);width:18px;height:18px;margin:2px 0 0;flex:none}
.dk-check input:disabled+span{color:var(--ink-400)}
.dk-tag{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--border-default);border-radius:var(--radius-round);padding:6px 12px;color:var(--ink-700);background:transparent}
.dk-tag--signal{color:var(--signal);border-color:var(--signal)}
.dk-tag--filled{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.dk-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-3);padding:var(--space-5)}
.dk-card--dark{background:var(--surface-dark-raised);border-color:var(--border-on-dark);color:var(--paper)}
.dk-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px;padding:0 24px;background:var(--paper);border-bottom:1px solid var(--border-hairline)}
.dk-nav__brand{display:flex;align-items:center;gap:10px;font:500 16px/1 var(--font-display);letter-spacing:.08em;color:var(--ink);text-decoration:none}
.dk-nav__brand img{height:28px;display:block}
.dk-nav__links{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.dk-nav__link{font:500 14px/1 var(--font-body);color:var(--ink);text-decoration:none;transition:color var(--dur-fast) var(--ease-focus)}
.dk-nav__link:hover,.dk-nav__link--active{color:var(--signal)}
.dk-footer{background:var(--ink);color:var(--paper);padding:var(--space-8) var(--space-5) var(--space-6)}
.dk-footer__grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-6)}
.dk-footer__title{font:500 12px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-300);margin:0 0 14px}
.dk-footer a{color:var(--paper);text-decoration:none;transition:color var(--dur-fast) var(--ease-focus)}
.dk-footer a:hover{color:var(--signal-bright)}
.dk-footer__bottom{max-width:var(--container-max);margin:var(--space-7) auto 0;padding-top:var(--space-5);border-top:1px solid var(--border-on-dark);display:flex;justify-content:space-between;font:400 13px/1.4 var(--font-body);color:var(--ink-300)}
.dk-code{background:var(--ink);color:var(--paper);border-radius:var(--radius-3);overflow:hidden;font:400 var(--text-code)/var(--lh-code) var(--font-mono)}
.dk-code__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border-on-dark);color:var(--ink-300);font-size:12px;letter-spacing:.08em}
.dk-code__copy{background:none;border:0;color:var(--ink-300);font:500 12px var(--font-mono);letter-spacing:.08em;cursor:pointer;padding:2px 4px}
.dk-code__copy:hover{color:var(--signal-bright)}
.dk-code pre{margin:0;padding:16px 20px;overflow-x:auto}
.dk-table{width:100%;border-collapse:collapse;font:400 15px/1.5 var(--font-body);font-variant-numeric:tabular-nums}
.dk-table th{font:500 12px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;text-align:left;color:var(--text-secondary);padding:10px 12px;border-bottom:1px solid var(--ink);font-weight:500}
.dk-table td{padding:12px;border-bottom:1px solid var(--border-hairline)}
.dk-table tbody tr{transition:background var(--dur-fast) var(--ease-focus)}
.dk-table tbody tr:hover{background:var(--ink-100)}
.dk-table .num{text-align:right}
.dk-dialog-overlay{position:fixed;inset:0;background:rgba(22,24,29,.5);display:flex;align-items:center;justify-content:center;padding:24px;z-index:100}
.dk-dialog{background:var(--surface-card);border-radius:var(--radius-3);box-shadow:var(--shadow-overlay);max-width:480px;width:100%;padding:var(--space-6)}
.dk-dialog__title{font:500 var(--text-heading)/var(--lh-heading) var(--font-display);margin:0 0 12px}
.dk-dialog__actions{display:flex;justify-content:flex-end;gap:12px;margin-top:var(--space-5)}
.dk-toast{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);border-radius:var(--radius-2);padding:12px 16px;box-shadow:var(--shadow-overlay);font:400 14px/1.4 var(--font-body)}
.dk-toast__dot{width:8px;height:8px;border-radius:50%;background:var(--ink-300);flex:none}
.dk-toast--ok .dk-toast__dot{background:#5BB893}
.dk-toast--warn .dk-toast__dot{background:#D9A83F}
.dk-toast--error .dk-toast__dot{background:#E0705A}
.dk-pagination{display:flex;gap:4px;align-items:center;font:500 14px/1 var(--font-mono)}
.dk-page{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-1);border:1px solid transparent;background:none;color:var(--ink-700);text-decoration:none;cursor:pointer;font:inherit;transition:background var(--dur-fast) var(--ease-focus),color var(--dur-fast) var(--ease-focus)}
.dk-page:hover{background:var(--ink-100)}
.dk-page--current{color:var(--signal);border-color:var(--signal)}
.dk-page:disabled{color:var(--ink-300);cursor:not-allowed;background:none}
.dk-status{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500)}
.dk-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#5BB893}
.dk-status--on-dark{color:var(--ink-300)}
.dk-kicker{display:inline-flex;align-items:center;gap:10px;font:500 var(--text-kicker)/var(--lh-kicker) var(--font-mono);letter-spacing:var(--ls-kicker);text-transform:uppercase;color:var(--text-secondary)}
.dk-kicker::before{content:"";width:16px;height:2px;border-radius:1px;background:currentColor}
.dk-kicker--accent{color:var(--signal)}
.dk-csheader{max-width:var(--container-max)}
.dk-csheader__title{font:500 var(--text-display-2)/var(--lh-display-2) var(--font-display);letter-spacing:var(--ls-display-2);margin:16px 0 24px}
.dk-csheader__meta{display:flex;gap:var(--space-7);margin:0;padding:24px 0 0;border-top:1px solid var(--border-default)}
.dk-csheader__meta div{margin:0}
.dk-csheader__meta dt{font:500 var(--text-kicker)/var(--lh-kicker) var(--font-mono);letter-spacing:var(--ls-kicker);text-transform:uppercase;color:var(--text-secondary);margin:0 0 6px}
.dk-csheader__meta dd{font:400 15px/1.5 var(--font-body);margin:0}