/* ============================================
   TNK Design System — Dark Mode
   Baseado em DESIGN.md (Cursor Brand)
   ============================================ */

:root {
    /* ── Brand & Accent ── */
    --tnk-primary: #f54e00;
    --tnk-primary-active: #d04200;
    --tnk-on-primary: #ffffff;

    /* ── Surface ── */
    --tnk-canvas: #2a2a26;
    --tnk-canvas-soft: #222220;
    --tnk-surface-card: #2a2a26;
    --tnk-surface-strong: #3a3832;

    /* ── Hairlines ── */
    --tnk-hairline: #3a3832;
    --tnk-hairline-soft: #33312b;
    --tnk-hairline-strong: #4a4840;

    /* ── Text ── */
    --tnk-ink: #f0f0ea;
    --tnk-body: #a09c92;
    --tnk-body-strong: #e8e6dd;
    --tnk-muted: #807d72;
    --tnk-muted-soft: #5a5852;

    /* ── Timeline (AI-action signature) ── */
    --tnk-timeline-thinking: #8b5a4a;
    --tnk-timeline-grep: #4a7a52;
    --tnk-timeline-read: #4a6a8b;
    --tnk-timeline-edit: #7a5a9b;
    --tnk-timeline-done: #8b6a3a;

    /* ── Semantic ── */
    --tnk-success: #1f8a65;
    --tnk-error: #cf2d56;

    /* ── Typography ── */
    --tnk-font-sans: 'Inter', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --tnk-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* ── Rounded ── */
    --tnk-radius-none: 0px;
    --tnk-radius-xs: 4px;
    --tnk-radius-sm: 6px;
    --tnk-radius-md: 8px;
    --tnk-radius-lg: 12px;
    --tnk-radius-xl: 16px;
    --tnk-radius-pill: 9999px;

    /* ── Spacing ── */
    --tnk-space-xxs: 4px;
    --tnk-space-xs: 8px;
    --tnk-space-sm: 12px;
    --tnk-space-base: 16px;
    --tnk-space-md: 20px;
    --tnk-space-lg: 24px;
    --tnk-space-xl: 32px;
    --tnk-space-xxl: 48px;
    --tnk-space-section: 80px;
}

/* ============================================
   Global Reset
   ============================================ */

html, body {
    margin: 0;
    padding: 0;
    background: var(--tnk-canvas);
    color: var(--tnk-body);
    font-family: var(--tnk-font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ============================================
   Icons
   ============================================ */

.tnk-icon {
    display: inline-flex;
    vertical-align: middle;
    flex-shrink: 0;
    color: var(--tnk-body);
}

/* ============================================
   Headers (top bar com fundo)
   ============================================ */

.tnk-header {
    display: flex;
    align-items: center;
    padding: 0 var(--tnk-space-base);
    height: 48px;
    background: var(--tnk-surface-card);
    border-bottom: 1px solid var(--tnk-hairline);
    color: var(--tnk-ink);
}

.tnk-header h3,
.tnk-header h4,
.tnk-header h5,
.tnk-header h6 {
    margin: 0;
    font-family: var(--tnk-font-sans);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.88px;
    text-transform: uppercase;
    color: var(--tnk-body);
}

.tnk-header--section {
    height: 40px;
    padding: 0 var(--tnk-space-base);
    margin-top: var(--tnk-space-base);
    background: var(--tnk-surface-card);
    border: 1px solid var(--tnk-hairline);
    border-radius: var(--tnk-radius-md);
}

/* ============================================
   Spacer
   ============================================ */

.tnk-spacer {
    flex: 1;
    min-width: var(--tnk-space-xs);
}

/* ============================================
   Stack (flex layout)
   ============================================ */

.tnk-stack-h {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--tnk-space-xs);
}

.tnk-stack-v {
    display: flex;
    flex-direction: column;
    gap: var(--tnk-space-xs);
}

.tnk-stack-h-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--tnk-space-xs);
}

/* ============================================
   Grid
   ============================================ */

.tnk-grid {
    display: grid;
    gap: var(--tnk-space-sm);
}

/* ============================================
   Cards
   ============================================ */

.tnk-card {
    background: var(--tnk-surface-card);
    border: 1px solid var(--tnk-hairline);
    border-radius: var(--tnk-radius-lg);
    padding: var(--tnk-space-lg);
    color: var(--tnk-ink);
    overflow: hidden;
}

.tnk-card-row {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--tnk-surface-card);
    border: 1px solid var(--tnk-hairline);
    border-radius: var(--tnk-radius-md);
    color: var(--tnk-ink);
    overflow: hidden;
}

.tnk-card-limitado {
    max-width: 320px;
    background: var(--tnk-surface-card);
    border: 1px solid var(--tnk-hairline);
    border-radius: var(--tnk-radius-lg);
    padding: var(--tnk-space-base);
    color: var(--tnk-ink);
    overflow: hidden;
}

.tnk-card img,
.tnk-card-limitado img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ============================================
   Buttons
   ============================================ */

.tnk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    height: 40px;
    border: 1px solid var(--tnk-hairline-strong);
    border-radius: var(--tnk-radius-md);
    background: var(--tnk-surface-card);
    color: var(--tnk-ink);
    font-family: var(--tnk-font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.0;
    letter-spacing: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.tnk-btn:hover {
    background: var(--tnk-surface-strong);
    border-color: var(--tnk-hairline-strong);
}

.tnk-btn:active {
    background: var(--tnk-hairline-strong);
}

/* Primary — Cursor Orange */
.tnk-btn-accent {
    background: var(--tnk-primary);
    color: var(--tnk-on-primary);
    border-color: var(--tnk-primary);
}

.tnk-btn-accent:hover {
    background: var(--tnk-primary-active);
    border-color: var(--tnk-primary-active);
    color: var(--tnk-on-primary);
}

.tnk-btn-accent:active {
    background: #b83800;
    border-color: #b83800;
}

/* Stealth — transparent */
.tnk-btn-stealth {
    background: transparent;
    border-color: transparent;
    color: var(--tnk-body);
}

.tnk-btn-stealth:hover {
    background: var(--tnk-surface-strong);
    border-color: transparent;
    color: var(--tnk-ink);
}

/* Neutral / secondary */
.tnk-btn-neutral {
    background: var(--tnk-surface-strong);
    border-color: var(--tnk-hairline);
    color: var(--tnk-ink);
}

.tnk-btn-neutral:hover {
    background: var(--tnk-hairline);
}

/* Small variant */
.tnk-btn-sm {
    padding: 4px 10px;
    height: 28px;
    font-size: 12px;
    gap: 3px;
}

/* Icon-only button */
.tnk-btn-icon {
    border: none;
    background: transparent;
    color: var(--tnk-body);
    cursor: pointer;
    padding: var(--tnk-space-xxs);
    border-radius: var(--tnk-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
}

.tnk-btn-icon:hover {
    background: var(--tnk-surface-strong);
    color: var(--tnk-ink);
}

/* Download (ink background, cream text) */
.tnk-btn-download {
    background: var(--tnk-ink);
    color: var(--tnk-canvas);
    border-color: var(--tnk-ink);
    padding: 12px 20px;
    height: 44px;
    border-radius: var(--tnk-radius-md);
}

.tnk-btn-download:hover {
    background: var(--tnk-body-strong);
    border-color: var(--tnk-body-strong);
    color: var(--tnk-canvas);
}

/* ============================================
   Text Fields
   ============================================ */

.tnk-text-field {
    display: flex;
    flex-direction: column;
    gap: var(--tnk-space-xxs);
}

.tnk-text-field label {
    font-family: var(--tnk-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.88px;
    text-transform: uppercase;
    color: var(--tnk-muted);
}

.tnk-text-field input,
.tnk-text-field select {
    padding: 12px 16px;
    height: 44px;
    border: 1px solid var(--tnk-hairline);
    border-radius: var(--tnk-radius-md);
    font-family: var(--tnk-font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    background: var(--tnk-surface-card);
    color: var(--tnk-ink);
    outline: none;
    transition: border-color 0.15s;
}

.tnk-text-field input:focus,
.tnk-text-field select:focus {
    border-color: var(--tnk-hairline-strong);
}

.tnk-text-field input:read-only {
    background: var(--tnk-canvas-soft);
    color: var(--tnk-muted);
    cursor: default;
}

.tnk-text-field textarea {
    padding: 12px 16px;
    border: 1px solid var(--tnk-hairline);
    border-radius: var(--tnk-radius-md);
    font-family: var(--tnk-font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    background: var(--tnk-surface-card);
    color: var(--tnk-ink);
    outline: none;
    resize: vertical;
}

.tnk-text-field textarea:focus {
    border-color: var(--tnk-hairline-strong);
}

/* standalone input (without label wrapper) */
input.tnk-input,
select.tnk-input {
    padding: 12px 16px;
    height: 44px;
    border: 1px solid var(--tnk-hairline);
    border-radius: var(--tnk-radius-md);
    font-family: var(--tnk-font-sans);
    font-size: 14px;
    font-weight: 400;
    background: var(--tnk-surface-card);
    color: var(--tnk-ink);
    outline: none;
}

input.tnk-input:focus,
select.tnk-input:focus {
    border-color: var(--tnk-hairline-strong);
}

/* Search input */
input.tnk-search {
    padding: 10px 16px 10px 36px;
    height: 40px;
    border: 1px solid var(--tnk-hairline);
    border-radius: var(--tnk-radius-md);
    font-family: var(--tnk-font-sans);
    font-size: 14px;
    font-weight: 400;
    background: var(--tnk-surface-card);
    color: var(--tnk-ink);
    outline: none;
}

input.tnk-search:focus {
    border-color: var(--tnk-hairline-strong);
}

/* ============================================
   Select (Combobox replacement)
   ============================================ */

select.tnk-select {
    padding: 12px 16px;
    height: 44px;
    border: 1px solid var(--tnk-hairline);
    border-radius: var(--tnk-radius-md);
    font-family: var(--tnk-font-sans);
    font-size: 14px;
    font-weight: 400;
    background: var(--tnk-surface-card);
    color: var(--tnk-ink);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a09c92'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

select.tnk-select:focus {
    border-color: var(--tnk-hairline-strong);
}

/* ============================================
   Message Bars
   ============================================ */

.tnk-message-bar {
    padding: var(--tnk-space-sm) var(--tnk-space-base);
    border-radius: var(--tnk-radius-md);
    font-family: var(--tnk-font-sans);
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: var(--tnk-space-xs);
}

.tnk-message-bar-info {
    background: rgba(74, 106, 139, 0.15);
    color: #9fbbe0;
    border: 1px solid rgba(74, 106, 139, 0.3);
}

.tnk-message-bar-success {
    background: rgba(31, 138, 101, 0.15);
    color: #5dbea3;
    border: 1px solid rgba(31, 138, 101, 0.3);
}

.tnk-message-bar-error {
    background: rgba(207, 45, 86, 0.15);
    color: #e06c80;
    border: 1px solid rgba(207, 45, 86, 0.3);
}

.tnk-message-bar-warning {
    background: rgba(139, 106, 58, 0.15);
    color: #c0a35a;
    border: 1px solid rgba(139, 106, 58, 0.3);
}

/* ============================================
   Progress
   ============================================ */

.tnk-progress {
    height: 4px;
    background: var(--tnk-surface-strong);
    border-radius: 2px;
    overflow: hidden;
}

.tnk-progress-bar {
    height: 100%;
    background: var(--tnk-primary);
    animation: tnk-progress-indeterminate 1.5s ease-in-out infinite;
    width: 40%;
}

@keyframes tnk-progress-indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

.tnk-progress-ring {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--tnk-hairline);
    border-top-color: var(--tnk-primary);
    border-radius: 50%;
    animation: tnk-spin 0.8s linear infinite;
}

@keyframes tnk-spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   Badge / Pill
   ============================================ */

.tnk-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--tnk-radius-pill);
    background: var(--tnk-surface-strong);
    color: var(--tnk-ink);
    font-family: var(--tnk-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.88px;
    text-transform: uppercase;
    line-height: 1.4;
}

/* ============================================
   Divider
   ============================================ */

.tnk-divider-v {
    width: 1px;
    align-self: stretch;
    background: var(--tnk-hairline);
}

.tnk-divider-h {
    height: 1px;
    width: 100%;
    background: var(--tnk-hairline);
}

/* ============================================
   Navigation Link
   ============================================ */

.tnk-navlink {
    display: block;
    padding: var(--tnk-space-xs) var(--tnk-space-sm);
    text-decoration: none;
    color: var(--tnk-body);
    border-radius: var(--tnk-radius-md);
    font-family: var(--tnk-font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    transition: background 0.1s, color 0.1s;
}

.tnk-navlink:hover {
    background: var(--tnk-surface-strong);
    color: var(--tnk-ink);
    text-decoration: none;
}

/* ============================================
   Table
   ============================================ */

.tnk-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--tnk-font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.tnk-table th,
.tnk-table td {
    padding: var(--tnk-space-sm) var(--tnk-space-base);
    text-align: left;
    border-bottom: 1px solid var(--tnk-hairline);
}

.tnk-table th {
    background: var(--tnk-canvas-soft);
    color: var(--tnk-muted);
    font-family: var(--tnk-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.88px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 1;
}

.tnk-table tr:hover td {
    background: var(--tnk-canvas-soft);
}

.tnk-table td {
    color: var(--tnk-body);
}

/* ============================================
   Pagination
   ============================================ */

.tnk-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tnk-space-xxs);
    padding: var(--tnk-space-sm);
    font-family: var(--tnk-font-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--tnk-muted);
}

.tnk-pagination button {
    border: 1px solid var(--tnk-hairline);
    border-radius: var(--tnk-radius-sm);
    background: var(--tnk-surface-card);
    color: var(--tnk-body);
    padding: 6px 12px;
    cursor: pointer;
    font-family: var(--tnk-font-sans);
    font-size: 13px;
    transition: background 0.1s;
}

.tnk-pagination button:hover {
    background: var(--tnk-surface-strong);
    color: var(--tnk-ink);
}

.tnk-pagination button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ============================================
   Code Surfaces
   ============================================ */

.tnk-code,
code,
pre {
    font-family: var(--tnk-font-mono);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

.tnk-code-block {
    background: var(--tnk-surface-card);
    color: var(--tnk-ink);
    border: 1px solid var(--tnk-hairline);
    border-radius: var(--tnk-radius-lg);
    padding: var(--tnk-space-md);
    font-family: var(--tnk-font-mono);
    font-size: 13px;
    line-height: 1.5;
    overflow-x: auto;
}

/* ============================================
   Checkbox / Switch
   ============================================ */

input[type="checkbox"].tnk-checkbox {
    accent-color: var(--tnk-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Switch toggle */
.tnk-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--tnk-space-xs);
    cursor: pointer;
    font-family: var(--tnk-font-sans);
    font-size: 14px;
    color: var(--tnk-body);
}

.tnk-switch input {
    appearance: none;
    width: 36px;
    height: 20px;
    border-radius: var(--tnk-radius-pill);
    background: var(--tnk-hairline-strong);
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
}

.tnk-switch input::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tnk-canvas);
    transition: transform 0.15s;
}

.tnk-switch input:checked {
    background: var(--tnk-primary);
}

.tnk-switch input:checked::after {
    transform: translateX(16px);
}

/* ============================================
   Tree Node (substitui FluentTreeView)
   ============================================ */

.tnk-tree-node {
    user-select: none;
}

.tnk-tree-node-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--tnk-space-xxs) 0;
    cursor: pointer;
    color: var(--tnk-body);
    font-size: 14px;
    transition: color 0.1s;
}

.tnk-tree-node-label:hover {
    color: var(--tnk-ink);
}

.tnk-tree-node-actions {
    display: inline-flex;
    gap: 2px;
    margin-left: var(--tnk-space-xs);
}

.tnk-tree-children {
    margin-left: var(--tnk-space-lg);
}

/* ============================================
   Display Headers (Design.md hierarchy)
   ============================================ */

.tnk-display-lg {
    font-family: var(--tnk-font-sans);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.72px;
    color: var(--tnk-ink);
}

.tnk-display-md {
    font-family: var(--tnk-font-sans);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.325px;
    color: var(--tnk-ink);
}

.tnk-display-sm {
    font-family: var(--tnk-font-sans);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.11px;
    color: var(--tnk-ink);
}

.tnk-title-md {
    font-family: var(--tnk-font-sans);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tnk-ink);
}

.tnk-title-sm {
    font-family: var(--tnk-font-sans);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tnk-ink);
}

/* ============================================
   Caption (section labels)
   ============================================ */

.tnk-caption-uppercase {
    font-family: var(--tnk-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.88px;
    text-transform: uppercase;
    color: var(--tnk-muted);
}

/* ============================================
   Timeline Pills (in-product agent stages)
   ============================================ */

.tnk-pill-thinking {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--tnk-radius-pill);
    background: var(--tnk-timeline-thinking);
    color: var(--tnk-ink);
    font-family: var(--tnk-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.88px;
    text-transform: uppercase;
}

.tnk-pill-grep {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--tnk-radius-pill);
    background: var(--tnk-timeline-grep);
    color: var(--tnk-ink);
    font-family: var(--tnk-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.88px;
    text-transform: uppercase;
}

.tnk-pill-read {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--tnk-radius-pill);
    background: var(--tnk-timeline-read);
    color: var(--tnk-ink);
    font-family: var(--tnk-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.88px;
    text-transform: uppercase;
}

.tnk-pill-edit {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--tnk-radius-pill);
    background: var(--tnk-timeline-edit);
    color: var(--tnk-ink);
    font-family: var(--tnk-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.88px;
    text-transform: uppercase;
}

.tnk-pill-done {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--tnk-radius-pill);
    background: var(--tnk-timeline-done);
    color: var(--tnk-on-primary);
    font-family: var(--tnk-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.88px;
    text-transform: uppercase;
}

/* ============================================
   Utility
   ============================================ */

.tnk-canvas-bg {
    background: var(--tnk-canvas);
}

.tnk-surface-bg {
    background: var(--tnk-surface-card);
}

.tnk-text-ink {
    color: var(--tnk-ink);
}

.tnk-text-body {
    color: var(--tnk-body);
}

.tnk-text-muted {
    color: var(--tnk-muted);
}

/* ── Page containers ── */
.tnk-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--tnk-space-xl);
}

.tnk-section {
    padding: var(--tnk-space-section) var(--tnk-space-xl);
}