/* ==========================================================================
   Design System — internal.salesevolution.ru + Claude Code SPA
   Single source of truth for tokens and base components.

   Spec: /var/www/html/internal/docs/ui-guidelines.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — LIGHT theme (default)

   Applied when [data-theme="light"] OR system preference is light and no
   manual override. The theme attribute is set by inline <script> in the
   layout <head> before first render.
   -------------------------------------------------------------------------- */

:root,
:root[data-theme="light"] {
    /* Backgrounds */
    --bg-body:          #f5f7fa;
    --bg-surface:       #ffffff;
    --bg-surface-alt:   #f8f9fb;
    --bg-input:         #ffffff;
    --bg-hover:         #f0f3f7;
    --bg-code:          #f3f4f6;
    --bg-overlay:       rgba(15, 20, 25, 0.55);

    /* Text */
    --text-primary:     #1d1d1f;
    --text-secondary:   #4b5563;
    --text-muted:       #9ca3af;
    --text-heading:     #111827;
    --text-on-accent:   #ffffff;
    --text-link:        #007aff;
    --text-link-hover:  #0062cc;

    /* Borders */
    --border:           #e5e7eb;
    --border-subtle:    #f1f2f4;
    --border-strong:    #d1d5db;

    /* Accents */
    --accent:           #007aff;
    --accent-hover:     #0062cc;
    --accent-subtle:    rgba(0, 122, 255, 0.08);
    --accent-brand:     #d97757; /* Claude brand, SPA only */
    --accent-brand-hover: #c6613f;

    /* Semantic */
    --success:          #10b981;
    --success-subtle:   rgba(16, 185, 129, 0.1);
    --warning:          #f59e0b;
    --warning-subtle:   rgba(245, 158, 11, 0.12);
    --danger:           #ef4444;
    --danger-subtle:    rgba(239, 68, 68, 0.1);
    --info:             #3b82f6;
    --info-subtle:      rgba(59, 130, 246, 0.1);

    /* Badges — text contrast tuned for the subtle fills above */
    --badge-success-bg: rgba(16, 185, 129, 0.12);
    --badge-success-fg: #047857;
    --badge-warning-bg: rgba(245, 158, 11, 0.14);
    --badge-warning-fg: #92400e;
    --badge-danger-bg:  rgba(239, 68, 68, 0.12);
    --badge-danger-fg:  #b91c1c;
    --badge-info-bg:    rgba(59, 130, 246, 0.12);
    --badge-info-fg:    #1d4ed8;
    --badge-neutral-bg: #e5e7eb;
    --badge-neutral-fg: #374151;

    /* Sidebar (dark in both themes, VS Code aesthetic) */
    --sidebar-bg:         #0f1419;
    --sidebar-surface:    #1a1f26;
    --sidebar-text:       #e4e6eb;
    --sidebar-text-muted: #8e99a4;
    --sidebar-hover:      #252b33;
    --sidebar-active:     var(--accent);
    --sidebar-border:     rgba(255, 255, 255, 0.06);

    /* Shadows */
    --shadow-sm:  0 1px 2px rgba(15, 20, 25, 0.05);
    --shadow-md:  0 4px 12px rgba(15, 20, 25, 0.08);
    --shadow-lg:  0 10px 30px rgba(15, 20, 25, 0.12);
    --shadow-xl:  0 20px 50px rgba(15, 20, 25, 0.16);

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(0, 122, 255, 0.25);

    /* Scrollbar */
    --scrollbar-thumb:  rgba(0, 0, 0, 0.2);
    --scrollbar-track:  transparent;
}

/* --------------------------------------------------------------------------
   2. Tokens — DARK theme

   Applied when [data-theme="dark"] OR system preference is dark and no
   manual override.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] {
    /* Backgrounds */
    --bg-body:          #0f1419;
    --bg-surface:       #1a1f26;
    --bg-surface-alt:   #252b33;
    --bg-input:         #252b33;
    --bg-hover:         #2a313a;
    --bg-code:          #1e2329;
    --bg-overlay:       rgba(0, 0, 0, 0.75);

    /* Text */
    --text-primary:     #e4e6eb;
    --text-secondary:   #9ca3af;
    --text-muted:       #6b7280;
    --text-heading:     #f3f4f6;
    --text-on-accent:   #ffffff;
    --text-link:        #60a5fa;
    --text-link-hover:  #93c5fd;

    /* Borders */
    --border:           #2d333b;
    --border-subtle:    #20252c;
    --border-strong:    #3d444d;

    /* Accents */
    --accent:           #3b82f6;
    --accent-hover:     #60a5fa;
    --accent-subtle:    rgba(59, 130, 246, 0.15);

    /* Semantic — brighter hues for dark bg */
    --success:          #34d399;
    --success-subtle:   rgba(52, 211, 153, 0.15);
    --warning:          #fbbf24;
    --warning-subtle:   rgba(251, 191, 36, 0.15);
    --danger:           #f87171;
    --danger-subtle:    rgba(248, 113, 113, 0.15);
    --info:             #60a5fa;
    --info-subtle:      rgba(96, 165, 250, 0.15);

    /* Badges */
    --badge-success-bg: rgba(52, 211, 153, 0.18);
    --badge-success-fg: #6ee7b7;
    --badge-warning-bg: rgba(251, 191, 36, 0.18);
    --badge-warning-fg: #fcd34d;
    --badge-danger-bg:  rgba(248, 113, 113, 0.18);
    --badge-danger-fg:  #fca5a5;
    --badge-info-bg:    rgba(96, 165, 250, 0.18);
    --badge-info-fg:    #93c5fd;
    --badge-neutral-bg: #374151;
    --badge-neutral-fg: #d1d5db;

    /* Sidebar — keeps same dark palette, slightly darker than body */
    --sidebar-bg:         #0a0e14;
    --sidebar-surface:    #141920;
    --sidebar-hover:      #1f252d;

    /* Shadows — deeper in dark */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:  0 10px 30px rgba(0, 0, 0, 0.6);
    --shadow-xl:  0 20px 50px rgba(0, 0, 0, 0.7);

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);

    /* Scrollbar */
    --scrollbar-thumb:  rgba(255, 255, 255, 0.15);
}

/* --------------------------------------------------------------------------
   3. Tokens — Shared (theme-independent)
   -------------------------------------------------------------------------- */

:root {
    /* Typography */
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'Liberation Mono', monospace;

    --fs-xs:    11px;
    --fs-sm:    12px;
    --fs-md:    13px;
    --fs-lg:    14px;
    --fs-xl:    16px;
    --fs-2xl:   20px;
    --fs-3xl:   24px;
    --fs-4xl:   32px;

    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

    --lh-tight:    1.2;
    --lh-base:     1.5;
    --lh-relaxed:  1.6;

    /* Spacing (4px grid) */
    --sp-0:  0;
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* Radii */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast:  0.15s ease;
    --transition-base:  0.2s ease;
    --transition-slow:  0.3s ease;

    /* Layout */
    --sidebar-width:     240px;
    --topbar-height:     56px;
    --content-max-width: 1600px;
    --breakpoint-mobile: 768px;

    /* Z-index scale */
    --z-dropdown:    1000;
    --z-sticky:      1010;
    --z-sidebar:     1020;
    --z-overlay:     1030;
    --z-modal:       1040;
    --z-toast:       1050;
    --z-tooltip:     1060;
}

/* --------------------------------------------------------------------------
   4. Reset
   -------------------------------------------------------------------------- */

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

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color-scheme: light dark;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color: var(--text-primary);
    background: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--text-link-hover);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-heading);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }

p {
    color: var(--text-primary);
}

small {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

code, kbd, pre, samp {
    font-family: var(--font-mono);
    font-size: 0.925em;
}

code {
    background: var(--bg-code);
    padding: 0.15em 0.35em;
    border-radius: var(--radius-sm);
}

kbd {
    display: inline-block;
    padding: 0.15em 0.45em;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
    color: var(--text-secondary);
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--sp-4) 0;
}

/* --------------------------------------------------------------------------
   5. Focus
   -------------------------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

button, a, input, select, textarea {
    &:focus-visible { box-shadow: var(--focus-ring); }
}

/* --------------------------------------------------------------------------
   6. Scrollbars (webkit)
   -------------------------------------------------------------------------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* --------------------------------------------------------------------------
   7. Icons

   Rendered via the {{ icon() }} Jinja macro → <svg class="icon"><use .../></svg>
   -------------------------------------------------------------------------- */

.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   8. Card
   -------------------------------------------------------------------------- */

.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    margin-bottom: var(--sp-6);
    box-shadow: var(--shadow-sm);
}

.card--compact { padding: var(--sp-4); }
.card--flat { box-shadow: none; }

.card > h1,
.card > h2,
.card > h3,
.card > h4 {
    margin-bottom: var(--sp-4);
}

.card > *:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 36px;
    padding: var(--sp-2) var(--sp-4);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    line-height: 1;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    user-select: none;
}

.btn:hover { background: var(--bg-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Variants */
.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}
.btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--text-on-accent);
}

.btn--secondary {
    background: var(--bg-surface);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.btn--danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}
.btn--danger:hover { filter: brightness(0.93); }

.btn--success {
    background: var(--success);
    border-color: var(--success);
    color: #ffffff;
}
.btn--success:hover { filter: brightness(0.93); }

.btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.btn--ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.btn--icon:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Sizes */
.btn--sm { min-height: 28px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.btn--lg { min-height: 44px; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-lg); }

@media (max-width: 768px) {
    .btn { min-height: 44px; }
    .btn--sm { min-height: 36px; }
    .btn--icon { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   10. Form fields
   -------------------------------------------------------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-4);
}

.field__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
}

.field__hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.field__error {
    font-size: var(--fs-xs);
    color: var(--danger);
}

.input,
.textarea,
.select {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: var(--sp-2) var(--sp-3);
    font-family: inherit;
    font-size: var(--fs-md);
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-muted);
}

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.input--error,
.textarea--error { border-color: var(--danger); }

.textarea { min-height: 96px; resize: vertical; line-height: var(--lh-base); }

.input--sm { min-height: 28px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }
.input--lg { min-height: 44px; font-size: var(--fs-lg); }

@media (max-width: 768px) {
    .input, .textarea, .select { min-height: 44px; font-size: 16px; /* prevent iOS zoom */ }
}

/* --------------------------------------------------------------------------
   11. Tables
   -------------------------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--sp-4) 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-md);
    color: var(--text-primary);
}

.table th,
.table td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-subtle);
}

.table th {
    background: var(--bg-surface-alt);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: sticky;
    top: 0;
    z-index: 1;
}

.table tbody tr {
    transition: background var(--transition-fast);
}

.table tbody tr:hover {
    background: var(--bg-hover);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Modifiers */
.table--compact th,
.table--compact td { padding: var(--sp-2) var(--sp-3); }

.table--striped tbody tr:nth-child(even) { background: var(--bg-surface-alt); }
.table--striped tbody tr:nth-child(even):hover { background: var(--bg-hover); }

.table--nums .amt,
.table--nums .num { font-family: var(--font-mono); text-align: right; }

/* --------------------------------------------------------------------------
   12. Badges
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.badge--success { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.badge--warning { background: var(--badge-warning-bg); color: var(--badge-warning-fg); }
.badge--danger  { background: var(--badge-danger-bg);  color: var(--badge-danger-fg); }
.badge--info    { background: var(--badge-info-bg);    color: var(--badge-info-fg); }
.badge--neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }

/* --------------------------------------------------------------------------
   13. Status dot
   -------------------------------------------------------------------------- */

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    flex-shrink: 0;
}
.dot--success { background: var(--success); }
.dot--warning { background: var(--warning); }
.dot--danger  { background: var(--danger); }
.dot--info    { background: var(--info); }
.dot--neutral { background: var(--text-muted); }

/* --------------------------------------------------------------------------
   14. Alerts
   -------------------------------------------------------------------------- */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
    border: 1px solid transparent;
}

.alert--success { background: var(--success-subtle); color: var(--badge-success-fg); border-color: var(--success); }
.alert--warning { background: var(--warning-subtle); color: var(--badge-warning-fg); border-color: var(--warning); }
.alert--error   { background: var(--danger-subtle);  color: var(--badge-danger-fg);  border-color: var(--danger); }
.alert--info    { background: var(--info-subtle);    color: var(--badge-info-fg);    border-color: var(--info); }

/* --------------------------------------------------------------------------
   15. Layout primitives
   -------------------------------------------------------------------------- */

.container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--sp-6);
}

@media (max-width: 768px) {
    .container { padding: var(--sp-4); }
}

.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack--sm { gap: var(--sp-2); }
.stack--lg { gap: var(--sp-6); }

.row { display: flex; flex-direction: row; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row--nowrap { flex-wrap: nowrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }

.grow { flex: 1; }

/* Visually-hidden (a11y) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   16. Top bar
   -------------------------------------------------------------------------- */

.top-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--topbar-height);
    padding: 0 var(--sp-6);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
}

.top-bar h1,
.top-bar .top-bar__title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--text-heading);
    margin: 0;
}

@media (max-width: 768px) {
    .top-bar { padding: 0 var(--sp-4) 0 calc(var(--sp-4) + 48px); /* leave room for hamburger */ }
    .top-bar h1 { font-size: var(--fs-lg); }
}

/* Status dot used in top-bar for draft/active/in_progress/completed/on_hold */
.top-bar .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.top-bar .status-dot.draft       { background: var(--text-muted); }
.top-bar .status-dot.active      { background: var(--success); }
.top-bar .status-dot.in_progress { background: var(--info); }
.top-bar .status-dot.completed   { background: var(--text-muted); opacity: 0.6; }
.top-bar .status-dot.on_hold     { background: var(--warning); }

/* --------------------------------------------------------------------------
   17. Content area
   -------------------------------------------------------------------------- */

.main-content { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }

.content {
    flex: 1;
    padding: var(--sp-6);
    max-width: var(--content-max-width);
    width: 100%;
}

@media (max-width: 768px) {
    .main-content { margin-left: 0; }
    .content { padding: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   18. Legacy aliases — transitional compatibility for pre-refactor screens.

   These aliases map token names used across the pre-Phase-0 templates to the
   canonical design-system tokens. Templates migrated to the new system should
   reference the canonical names directly. Delete an alias when no template
   uses it any more.

   Status: removed as tiers are migrated in Phase 1.
   -------------------------------------------------------------------------- */

:root {
    /* Backgrounds */
    --bg-card:                var(--bg-surface);
    --bg-card-hover:          var(--bg-hover);
    --bg-table-header:        var(--bg-surface-alt);
    --bg-stat-item:           var(--bg-surface-alt);
    --bg-topbar:              var(--bg-surface);
    --bg-popup:               var(--bg-surface);
    --bg-transactions-list:   var(--bg-surface-alt);
    --bg-project-desc:        var(--bg-surface-alt);
    --bg-filter:              var(--bg-surface-alt);
    --bg-filter-hover:        var(--bg-hover);
    --bg-filter-active:       var(--accent);
    --bg-filter-badge:        var(--bg-surface-alt);
    --bg-section-header:      var(--sidebar-bg);
    --bg-section-header-hover:var(--sidebar-hover);
    --bg-authorization:       var(--bg-body);
    --bg-duplicate-row:       var(--danger-subtle);
    --bg-duplicate-row-hover: var(--danger-subtle);
    --bg-invoice-msg:         var(--info-subtle);
    --bg-invoice-msg-hover:   var(--info-subtle);
    --bg-tooltip:             var(--text-primary);
    --bg-notification-success:var(--success);
    --bg-notification-error:  var(--danger);

    /* Text */
    --text-on-card:    var(--text-primary);
    --text-tooltip:    var(--bg-surface);
    --text-link:       var(--accent);
    --text-link-hover: var(--accent-hover);

    /* Borders */
    --border-color: var(--border);
    --border-input: var(--border-strong);
    --border-table: var(--border);
    --border-filter:var(--border);

    /* Shadows */
    --shadow-card:        var(--shadow-sm);
    --shadow-card-hover:  var(--shadow-md);
    --topbar-shadow:      var(--shadow-sm);
    --popup-shadow:       var(--shadow-lg);

    /* Sidebar legacy names */
    --sidebar-text-secondary: var(--sidebar-text-muted);

    /* Status (old names) */
    --color-success: var(--success);
    --color-danger:  var(--danger);
    --color-warning: var(--warning);
    --color-info:    var(--info);

    /* Buttons (old names) */
    --btn-primary:         var(--accent);
    --btn-primary-hover:   var(--accent-hover);
    --btn-secondary-bg:    var(--bg-surface-alt);
}

/* --------------------------------------------------------------------------
   19. Legacy mobile rules — global responsive adjustments inherited from
   the pre-Phase-0 theme.css. Kept to avoid regressions until screens are
   individually refactored.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    /* Horizontal-scrolling tabs (legacy .tabs / .proj-tabs) */
    .tabs, .proj-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }
    .tabs::-webkit-scrollbar,
    .proj-tabs::-webkit-scrollbar { display: none; }

    .tab, .proj-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Legacy info-row grids collapse on mobile */
    .info-row {
        grid-template-columns: 1fr !important;
        gap: var(--sp-1) !important;
    }

    /* Bigger touch target for legacy project links */
    .project-link {
        padding: var(--sp-3) var(--sp-4) !important;
        min-height: 44px;
    }

    /* Goal cards stack on mobile */
    .goals-banner { flex-direction: column; }
    .goal-card { min-width: unset !important; }
}
