:root {
    --ink:        #0B1220;    --ink-900:    #111A2E;
    --ink-800:    #1B2740;
    --ink-700:    #26344F;
    --ink-600:    #3A4A66;
    --ink-500:    #5A6A85;
    --ink-400:    #8B98AE;
    --ink-300:    #C3CBDA;
    --ink-200:    #E1E7F0;
    --ink-100:    #EEF2F7;
    --ink-50:     #F6F8FB;

    --coolant:       #0E7490;
    --coolant-hover: #155E75;
    --coolant-tint:  #E0F2FE;
    --frost:         #22D3EE;

    --positive: #059669;
    --negative: #DC2626;
    --warning:  #D97706;

    --line: #E1E7F0;

    --ease-smooth: cubic-bezier(.2, .8, .2, 1);
    --dur-enter: 260ms;
    --dur-exit:  160ms;
    --dur-drawer: 280ms;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;

    --logo-size: 2.5rem;
}

html, body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.num,
.font-mono,
[data-num],
table td.num,
table th.num {
    font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo,
                 Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

table th.num,
table td.num { text-align: right; }

.brand-logo {
    width: var(--logo-size);
    height: var(--logo-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    border: 2px dashed #94A3B8;
    color: #64748B;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: #F8FAFC;
    flex-shrink: 0;
}

@view-transition { navigation: auto; }

.page-enter {
    animation: ui-fade-up var(--dur-enter) var(--ease-smooth) both;
}
.stagger > * {
    animation: ui-fade-up var(--dur-enter) var(--ease-smooth) both;
}
.stagger > *:nth-child(1) { animation-delay: 0ms;   }
.stagger > *:nth-child(2) { animation-delay: 35ms;  }
.stagger > *:nth-child(3) { animation-delay: 70ms;  }
.stagger > *:nth-child(4) { animation-delay: 105ms; }
.stagger > *:nth-child(5) { animation-delay: 140ms; }
.stagger > *:nth-child(6) { animation-delay: 175ms; }
.stagger > *:nth-child(7) { animation-delay: 210ms; }
.stagger > *:nth-child(8) { animation-delay: 245ms; }

@keyframes ui-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.ui-exit {
    opacity: 0 !important;
    transform: translateY(-4px);
    transition: opacity var(--dur-exit) var(--ease-smooth),
                transform var(--dur-exit) var(--ease-smooth);
    pointer-events: none;
}

#sidebar {
    transition: transform var(--dur-drawer) var(--ease-smooth) !important;
    will-change: transform;
}
#drawer-overlay {
    transition: opacity var(--dur-drawer) var(--ease-smooth) !important;
    will-change: opacity;
}

body.ui-drawer-locked { overflow: hidden; }

button, a.ui-btn, .ui-btn {
    transition: transform 150ms var(--ease-smooth),
                opacity 150ms var(--ease-smooth),
                box-shadow 150ms var(--ease-smooth),
                background-color 150ms var(--ease-smooth),
                border-color 150ms var(--ease-smooth),
                color 150ms var(--ease-smooth);
}
button:hover, a.ui-btn:hover, .ui-btn:hover { transform: translateY(-1px); }
button:active, a.ui-btn:active, .ui-btn:active { transform: scale(.98); }

tbody tr { transition: background-color 150ms var(--ease-smooth); }
tbody tr:hover { background-color: var(--ink-50); }

input, select, textarea {
    transition: border-color 150ms var(--ease-smooth),
                box-shadow 150ms var(--ease-smooth),
                background-color 150ms var(--ease-smooth);
}

.icon-crossfade { transition: opacity 180ms var(--ease-smooth); }

body.punch-theme .font-mono,
body.punch-theme .num,
body.punch-theme #live-clock,
body.punch-theme #live-time {
    font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo,
                 Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

:focus-visible {
    outline: 2px solid var(--frost);
    outline-offset: 2px;
    border-radius: 6px;
}

* { scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: #475569; border-radius: 9999px;
}
*::-webkit-scrollbar-thumb:hover { background-color: #64748B; }

.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.pt-safe { padding-top: env(safe-area-inset-top); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .page-enter, .stagger > *, .ui-exit {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    #sidebar, #drawer-overlay { transition: none !important; }
    button:hover, a.ui-btn:hover, .ui-btn:hover,
    button:active, a.ui-btn:active, .ui-btn:active {
        transform: none !important;
    }
}