/* Title TK Design System — components.css
   Optional class layer for repos without Tailwind. Every rule reads tokens only. */
.tk-btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:var(--btn-radius);font:500 var(--btn-app-size)/1.2 var(--tk-font-body);padding:var(--btn-app-py) var(--btn-app-px);white-space:nowrap;cursor:pointer;transition:all var(--tk-duration) var(--tk-ease)}
.tk-btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.tk-btn--primary:hover{background:var(--btn-primary-bg-hover);box-shadow:var(--focus-glow)}
.tk-btn--primary:active{background:var(--btn-primary-bg-pressed)}
.tk-on-ink .tk-btn--primary{background:var(--btn-primary-on-ink-bg);color:var(--btn-primary-on-ink-fg)}
.tk-on-ink .tk-btn--primary:hover{background:var(--tk-lapis-wash)}
.tk-btn--secondary{background:var(--btn-secondary-bg);color:var(--color-text);box-shadow:inset 0 0 0 1px var(--btn-secondary-border)}
.tk-btn--secondary:hover{background:var(--btn-secondary-bg-hover)}
.tk-btn--nav{height:var(--btn-nav-h);padding:0 var(--btn-nav-px);font-size:var(--btn-nav-size)}
.tk-btn--row{padding:var(--btn-row-py) var(--btn-row-px);font-size:var(--btn-row-size)}
.tk-btn--send{height:var(--btn-send-h);padding:0 var(--btn-send-px);font-size:var(--btn-send-size)}
.tk-btn:focus-visible,.tk-link-cta:focus-visible,.tk-input:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.tk-link-cta{display:inline-flex;align-items:center;gap:var(--link-cta-gap);font:500 var(--type-cta-size)/1 var(--tk-font-display);letter-spacing:var(--type-cta-tr);color:inherit;border-bottom:var(--link-cta-underline) solid currentColor;padding-bottom:4px;transition:all var(--tk-duration) var(--tk-ease)}
.tk-link-cta:hover{color:var(--color-interactive);gap:var(--link-cta-gap-hover)}
.tk-on-ink .tk-link-cta:hover{color:var(--tk-lapis-wash)}
.tk-input{border:1px solid var(--input-border);border-radius:var(--input-radius);background:var(--color-surface);font:400 var(--type-app-body-size)/1.4 var(--tk-font-body);color:var(--color-text);padding:9px 12px}
.tk-input:focus{border-color:var(--input-focus-border);box-shadow:var(--focus-ring);outline:0}
.tk-pill{display:inline-flex;align-items:center;gap:6px;padding:var(--pill-py) var(--pill-px);border-radius:var(--tk-radius-pill);background:var(--pill-bg);box-shadow:var(--pill-ring);font:500 var(--pill-size)/1.3 var(--tk-font-body);color:var(--color-text);white-space:nowrap}
.tk-pill::before{content:"";width:var(--pill-dot);height:var(--pill-dot);border-radius:50%;background:var(--dot,var(--color-source-dot));box-shadow:var(--dot-ring,none)}
.tk-pill[data-status=inbox]{--dot:var(--color-status-inbox);--dot-ring:inset 0 0 0 var(--color-status-inbox-ring-w) var(--color-status-inbox-ring)}
.tk-pill[data-status=flagged]{--dot:var(--color-status-flagged)}
.tk-pill[data-status=review]{--dot:var(--color-status-review);--dot-ring:inset 0 0 0 1px var(--color-status-review-ring)}
.tk-pill[data-status=promoted]{--dot:var(--color-status-promoted)}
.tk-pill[data-status=approved]{--dot:var(--color-status-approved);--dot-ring:inset 0 0 0 1px var(--color-status-approved-ring)}
.tk-pill[data-status=parked]{--dot:var(--color-status-parked)}
.tk-eyebrow{font:500 var(--type-eyebrow-size)/1 var(--tk-font-mono);letter-spacing:var(--type-eyebrow-tr);text-transform:uppercase;color:var(--color-text-2)}
.tk-card-panel{display:grid;gap:var(--card-panel-gap);background:var(--card-panel-bg);border-radius:var(--tk-radius-card);overflow:hidden;box-shadow:var(--ring)}
.tk-card-panel--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.tk-card-panel--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.tk-card{display:flex;flex-direction:column;gap:16px;padding:var(--card-pad-y) var(--card-pad-x);background:var(--color-surface);color:var(--color-text)}
.tk-card::before{content:"";width:var(--card-flag-w);height:var(--card-flag-h);border-radius:var(--tk-radius-flag);background:transparent}
.tk-card--lead::before{background:var(--color-accent)}
.tk-card--lead.tk-card--north{background:var(--lab-north);color:var(--tk-paper)}
.tk-card--lead.tk-card--next{background:var(--lab-next)}
.tk-card--lead.tk-card--flow{background:var(--lab-flow);color:var(--tk-paper)}
.tk-nav a{font:500 var(--type-nav-size)/1 var(--tk-font-body);color:var(--color-text-2);padding:6px 0}
.tk-nav a:hover{color:var(--color-interactive)}
.tk-nav a[aria-current=page]{color:var(--color-text);box-shadow:var(--nav-current-underline)}