/**
 * ═══════════════════════════════════════════════════════════
 * Tasko Design System v1.0
 * ფაილი: assets/css/design-system.css
 *
 * მთლიანი პროდუქტის ერთიანი დიზაინ-ენა.
 * ჩაიტვირთება ყველა გვერდზე header.php-ით.
 *
 * იერარქია (specificity-ით):
 *   1. design-system.css   ← variables + base components (ეს ფაილი)
 *   2. style.css           ← legacy global (overrides ds)
 *   3. mobile.css          ← mobile-specific (overrides ds + style)
 *   4. chat-upgrade.css    ← chat polish
 *   5. inline page <style> ← page-specific (highest)
 *
 * რას აკეთებს:
 *   • Design tokens (CSS variables)
 *   • Light / Dark mode (data-theme="dark")
 *   • Typography scale
 *   • Spacing scale
 *   • Component primitives (.btn, .card, .input, .badge, .toast)
 *   • Layout helpers (.stack, .cluster, .divider, .kbd)
 *   • Animations + transitions
 *   • Skeleton loaders
 *
 * რას NOT აკეთებს:
 *   • არ ცვლის არსებულ გვერდებს
 *   • არ აჩვენებს legacy class-ებს
 *   • არ აიძულებს არსებულ კოდს გადაკეთებას
 * ═══════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════
   1. DESIGN TOKENS — CSS VARIABLES
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Brand palette (navy — matches logo's T+J letterform) ── */
    --ds-brand-50:  #eef1f8;
    --ds-brand-100: #d8def0;
    --ds-brand-200: #b4bfdf;
    --ds-brand-300: #8d9ece;
    --ds-brand-400: #5a78c4;
    --ds-brand-500: #2c4581;
    --ds-brand-600: #1e3163;  /* primary — matches logo navy */
    --ds-brand-700: #152448;
    --ds-brand-800: #0d1730;
    --ds-brand-900: #060b1a;

    /* ── Highlight palette (logo's green dot — for live/success/dot accents) ── */
    --ds-highlight-50:  #e8f8ee;
    --ds-highlight-100: #c8edd5;
    --ds-highlight-400: #4dd187;
    --ds-highlight-500: #22b865;  /* logo green dot */
    --ds-highlight-600: #1a9b53;
    --ds-highlight-700: #137d40;

    --ds-gray-0:   #ffffff;
    --ds-gray-50:  #fafafa;
    --ds-gray-100: #f5f5f5;
    --ds-gray-150: #efefef;
    --ds-gray-200: #e5e5e5;
    --ds-gray-300: #d4d4d4;
    --ds-gray-400: #a3a3a3;
    --ds-gray-500: #737373;
    --ds-gray-600: #525252;
    --ds-gray-700: #404040;
    --ds-gray-800: #262626;
    --ds-gray-900: #171717;
    --ds-gray-950: #0a0a0a;

    --ds-red-100:    #fee2e2;
    --ds-red-500:    #ef4444;
    --ds-red-600:    #dc2626;
    --ds-red-700:    #b91c1c;

    --ds-amber-100:  #fef3c7;
    --ds-amber-500:  #f59e0b;
    --ds-amber-600:  #d97706;
    --ds-amber-700:  #b45309;

    --ds-blue-100:   #dbeafe;
    --ds-blue-500:   #3b82f6;
    --ds-blue-600:   #2563eb;
    --ds-blue-700:   #1d4ed8;

    --ds-violet-100: #ede9fe;
    --ds-violet-500: #8b5cf6;
    --ds-violet-600: #7c3aed;

    --ds-cyan-500:   #06b6d4;
    --ds-pink-500:   #ec4899;

    /* ── Semantic surface tokens (light) ── */
    --ds-bg:        #fafafa;
    --ds-bg-1:      #ffffff;
    --ds-bg-2:      #f5f5f5;
    --ds-bg-3:      #efefef;
    --ds-surface:   #ffffff;
    --ds-elevated:  #ffffff;

    --ds-border:        #e5e7eb;
    --ds-border-strong: #d4d4d4;
    --ds-border-soft:   #f0f0f0;

    --ds-text:    #0a0a0a;
    --ds-text-1:  #0a0a0a;  /* primary content */
    --ds-text-2:  #404040;  /* secondary */
    --ds-text-3:  #737373;  /* tertiary / hint */
    --ds-text-4:  #a3a3a3;  /* placeholder / disabled */
    --ds-text-on-brand: #ffffff;

    /* ── Accent (semantic) ── */
    --ds-accent:        var(--ds-brand-600);
    --ds-accent-hover:  var(--ds-brand-700);
    --ds-accent-soft:   var(--ds-brand-50);
    --ds-accent-text:   var(--ds-brand-700);

    --ds-success: var(--ds-highlight-500);  /* logo green */
    --ds-warning: var(--ds-amber-500);
    --ds-danger:  var(--ds-red-500);
    --ds-info:    var(--ds-blue-500);

    /* ── Focus ring (navy tint) ── */
    --ds-focus-ring: 0 0 0 4px rgba(30,49,99,.18);

    /* ═══ Typography ═══ */
    --ds-font:       'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ds-font-mono:  'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

    --ds-size-xs:   11px;
    --ds-size-sm:   12.5px;
    --ds-size-base: 14px;
    --ds-size-md:   15px;
    --ds-size-lg:   17px;
    --ds-size-xl:   20px;
    --ds-size-2xl:  24px;
    --ds-size-3xl:  30px;
    --ds-size-4xl:  36px;
    --ds-size-5xl:  48px;

    --ds-leading-tight:  1.2;
    --ds-leading-snug:   1.35;
    --ds-leading-normal: 1.5;
    --ds-leading-relaxed:1.65;

    --ds-tracking-tight:  -0.02em;
    --ds-tracking-normal:  0;
    --ds-tracking-wide:    0.02em;
    --ds-tracking-wider:   0.05em;

    /* ═══ Spacing scale (px) ═══ */
    --ds-space-0:   0;
    --ds-space-px:  1px;
    --ds-space-0_5: 2px;
    --ds-space-1:   4px;
    --ds-space-1_5: 6px;
    --ds-space-2:   8px;
    --ds-space-2_5: 10px;
    --ds-space-3:   12px;
    --ds-space-4:   16px;
    --ds-space-5:   20px;
    --ds-space-6:   24px;
    --ds-space-7:   28px;
    --ds-space-8:   32px;
    --ds-space-10:  40px;
    --ds-space-12:  48px;
    --ds-space-16:  64px;
    --ds-space-20:  80px;
    --ds-space-24:  96px;

    /* ═══ Radii ═══ */
    --ds-radius-xs:   4px;
    --ds-radius-sm:   6px;
    --ds-radius-md:   9px;
    --ds-radius-lg:   12px;
    --ds-radius-xl:   16px;
    --ds-radius-2xl:  22px;
    --ds-radius-pill: 9999px;

    /* ═══ Shadows ═══ */
    --ds-shadow-xs:  0 1px 2px rgba(0,0,0,.04);
    --ds-shadow-sm:  0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
    --ds-shadow-md:  0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
    --ds-shadow-lg:  0 12px 32px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
    --ds-shadow-xl:  0 24px 56px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);
    --ds-shadow-2xl: 0 36px 80px rgba(0,0,0,.15);

    /* Glow shadows (for accent emphasis) */
    --ds-shadow-brand:     0 6px 20px rgba(30,49,99,.28);
    --ds-shadow-highlight: 0 6px 20px rgba(34,184,101,.32);
    --ds-shadow-danger:    0 6px 20px rgba(239,68,68,.32);

    /* ═══ Transitions ═══ */
    --ds-dur-fast:   120ms;
    --ds-dur-base:   200ms;
    --ds-dur-slow:   350ms;
    --ds-dur-slower: 500ms;

    --ds-ease:        cubic-bezier(.2, .7, .2, 1);
    --ds-ease-out:    cubic-bezier(.16, 1, .3, 1);
    --ds-ease-in:     cubic-bezier(.7, 0, .84, 0);
    --ds-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* ═══ Z-index scale ═══ */
    --ds-z-base:      0;
    --ds-z-dropdown:  100;
    --ds-z-sticky:    200;
    --ds-z-overlay:   500;
    --ds-z-modal:     600;
    --ds-z-popover:   700;
    --ds-z-toast:     900;
    --ds-z-tooltip:   1000;

    /* ═══ Layout dimensions ═══ */
    --ds-header-h:      60px;
    --ds-mob-header-h:  50px;
    --ds-mob-nav-h:     calc(47px + env(safe-area-inset-bottom, 0));
    --ds-sidebar-w:     240px;

    /* ═══ Aurora gradient (used on dark hero sections — navy + green logo accents) ═══ */
    --ds-aurora: radial-gradient(ellipse 80% 60% at 30% 80%, rgba(34,184,101,.22) 0%, transparent 60%),
                 radial-gradient(ellipse 60% 50% at 80% 20%, rgba(90,120,196,.28) 0%, transparent 65%),
                 linear-gradient(135deg, #0d1730 0%, #1e3163 50%, #152448 100%);
}

/* ═══════════════════════════════════════════════════════════
   2. DARK THEME
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"], .dark {
    --ds-bg:        #0a0e1a;
    --ds-bg-1:      #0f141f;
    --ds-bg-2:      #161b28;
    --ds-bg-3:      #1d2332;
    --ds-surface:   #131826;
    --ds-elevated:  #1a2030;

    --ds-border:        #262d3d;
    --ds-border-strong: #353d50;
    --ds-border-soft:   #1d2332;

    --ds-text-1: #f5f7fa;
    --ds-text-2: #b8bec9;
    --ds-text-3: #7a8294;
    --ds-text-4: #4a5060;
    --ds-text:   var(--ds-text-1);

    --ds-accent-soft: rgba(90,120,196,.14);
    --ds-accent-text: var(--ds-brand-400);

    --ds-shadow-xs:  0 1px 2px rgba(0,0,0,.3);
    --ds-shadow-sm:  0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --ds-shadow-md:  0 4px 12px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3);
    --ds-shadow-lg:  0 12px 32px rgba(0,0,0,.45), 0 4px 8px rgba(0,0,0,.3);
    --ds-shadow-xl:  0 24px 56px rgba(0,0,0,.5);

    --ds-focus-ring: 0 0 0 4px rgba(90,120,196,.28);
}

/* ═══════════════════════════════════════════════════════════
   3. BASE RESET & SMOOTHING (subtle, non-breaking)
   ═══════════════════════════════════════════════════════════ */
.ds, .ds * {
    box-sizing: border-box;
}

/* Selection styling — global, low impact */
::selection {
    background: var(--ds-brand-200);
    color: var(--ds-brand-900);
}

/* Smooth scrolling globally */
html { scroll-behavior: smooth; }

/* Better font rendering on body if it uses Outfit */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ═══════════════════════════════════════════════════════════
   4. TYPOGRAPHY UTILITIES (.ds-*)
   ═══════════════════════════════════════════════════════════ */
.ds-text-xs     { font-size: var(--ds-size-xs); }
.ds-text-sm     { font-size: var(--ds-size-sm); }
.ds-text-base   { font-size: var(--ds-size-base); }
.ds-text-md     { font-size: var(--ds-size-md); }
.ds-text-lg     { font-size: var(--ds-size-lg); }
.ds-text-xl     { font-size: var(--ds-size-xl); }
.ds-text-2xl    { font-size: var(--ds-size-2xl); }
.ds-text-3xl    { font-size: var(--ds-size-3xl); }
.ds-text-4xl    { font-size: var(--ds-size-4xl); }
.ds-text-5xl    { font-size: var(--ds-size-5xl); }

.ds-fw-400 { font-weight: 400; }
.ds-fw-500 { font-weight: 500; }
.ds-fw-600 { font-weight: 600; }
.ds-fw-700 { font-weight: 700; }
.ds-fw-800 { font-weight: 800; }
.ds-fw-900 { font-weight: 900; }

.ds-tt-up   { text-transform: uppercase; letter-spacing: var(--ds-tracking-wider); }
.ds-tracking-tight { letter-spacing: var(--ds-tracking-tight); }

.ds-text-1 { color: var(--ds-text-1); }
.ds-text-2 { color: var(--ds-text-2); }
.ds-text-3 { color: var(--ds-text-3); }
.ds-text-4 { color: var(--ds-text-4); }

.ds-text-brand   { color: var(--ds-accent-text); }
.ds-text-success { color: var(--ds-success); }
.ds-text-warning { color: var(--ds-amber-700); }
.ds-text-danger  { color: var(--ds-red-700); }
.ds-text-info    { color: var(--ds-blue-700); }

.ds-mono { font-family: var(--ds-font-mono); }

/* Gradient text */
.ds-gradient-text {
    background: linear-gradient(135deg, var(--ds-text-1) 0%, var(--ds-text-3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ds-gradient-text-brand {
    background: linear-gradient(135deg, var(--ds-brand-400) 0%, var(--ds-brand-600) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ═══════════════════════════════════════════════════════════
   5. LAYOUT PRIMITIVES
   ═══════════════════════════════════════════════════════════ */
.ds-stack { display: flex; flex-direction: column; }
.ds-stack-2 > * + * { margin-top: var(--ds-space-2); }
.ds-stack-3 > * + * { margin-top: var(--ds-space-3); }
.ds-stack-4 > * + * { margin-top: var(--ds-space-4); }
.ds-stack-6 > * + * { margin-top: var(--ds-space-6); }

.ds-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2);
}
.ds-cluster-3 { gap: var(--ds-space-3); }
.ds-cluster-4 { gap: var(--ds-space-4); }

.ds-row {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
}

.ds-divider {
    height: 1px;
    background: var(--ds-border);
    border: none;
    margin: var(--ds-space-4) 0;
}
.ds-divider-vert {
    width: 1px;
    background: var(--ds-border);
    align-self: stretch;
}

/* Container */
.ds-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--ds-space-4);
}

/* ═══════════════════════════════════════════════════════════
   6. BUTTONS — .ds-btn
   ═══════════════════════════════════════════════════════════ */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    padding: 9px 14px;
    font-family: inherit;
    font-size: var(--ds-size-base);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    transition:
        background var(--ds-dur-fast) var(--ds-ease),
        border-color var(--ds-dur-fast) var(--ds-ease),
        color var(--ds-dur-fast) var(--ds-ease),
        transform var(--ds-dur-fast) var(--ds-ease),
        box-shadow var(--ds-dur-fast) var(--ds-ease);
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ds-text-1);
    background: var(--ds-bg-1);
    border-color: var(--ds-border);
}
.ds-btn:hover { background: var(--ds-bg-2); border-color: var(--ds-border-strong); }
.ds-btn:active { transform: scale(.98); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.ds-btn:disabled,
.ds-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

/* Variants */
.ds-btn-primary {
    background: var(--ds-gray-950);
    color: var(--ds-gray-0);
    border-color: var(--ds-gray-950);
}
.ds-btn-primary:hover { background: var(--ds-gray-800); border-color: var(--ds-gray-800); }
[data-theme="dark"] .ds-btn-primary,
.dark .ds-btn-primary {
    background: var(--ds-gray-0);
    color: var(--ds-gray-950);
    border-color: var(--ds-gray-0);
}

.ds-btn-brand {
    background: linear-gradient(135deg, var(--ds-brand-500), var(--ds-brand-600));
    color: var(--ds-text-on-brand);
    border-color: transparent;
    box-shadow: var(--ds-shadow-brand);
}
.ds-btn-brand:hover { filter: brightness(1.06); transform: translateY(-1px); }

.ds-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ds-text-2);
}
.ds-btn-ghost:hover { background: var(--ds-bg-2); border-color: transparent; color: var(--ds-text-1); }

.ds-btn-outline {
    background: transparent;
    color: var(--ds-text-1);
    border-color: var(--ds-border);
}
.ds-btn-outline:hover { background: var(--ds-bg-2); border-color: var(--ds-border-strong); }

.ds-btn-danger {
    background: var(--ds-red-500);
    color: var(--ds-gray-0);
    border-color: var(--ds-red-500);
}
.ds-btn-danger:hover { background: var(--ds-red-600); border-color: var(--ds-red-600); }

/* Sizes */
.ds-btn-sm { padding: 6px 10px; font-size: var(--ds-size-sm); border-radius: var(--ds-radius-sm); }
.ds-btn-lg { padding: 12px 20px; font-size: var(--ds-size-md); border-radius: var(--ds-radius-lg); }
.ds-btn-xl { padding: 14px 24px; font-size: var(--ds-size-lg); border-radius: var(--ds-radius-lg); }

.ds-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--ds-radius-md);
}
.ds-btn-icon.ds-btn-sm { width: 28px; height: 28px; }
.ds-btn-icon.ds-btn-lg { width: 44px; height: 44px; }

.ds-btn-block { width: 100%; }

/* ═══════════════════════════════════════════════════════════
   7. CARDS — .ds-card
   ═══════════════════════════════════════════════════════════ */
.ds-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-5);
    transition: border-color var(--ds-dur-fast), box-shadow var(--ds-dur-fast), transform var(--ds-dur-fast);
}
.ds-card-hover:hover {
    border-color: var(--ds-border-strong);
    box-shadow: var(--ds-shadow-md);
    transform: translateY(-2px);
}
.ds-card-flat { box-shadow: none; }
.ds-card-raised { box-shadow: var(--ds-shadow-md); }
.ds-card-tight { padding: var(--ds-space-3); }
.ds-card-roomy { padding: var(--ds-space-7); }

.ds-card-glass {
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.5);
}
[data-theme="dark"] .ds-card-glass,
.dark .ds-card-glass {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
}

.ds-card-aurora {
    background: var(--ds-aurora);
    border: none;
    color: #fff;
    overflow: hidden;
    position: relative;
}

/* ═══════════════════════════════════════════════════════════
   8. INPUTS — .ds-input, .ds-textarea, .ds-select
   ═══════════════════════════════════════════════════════════ */
.ds-input,
.ds-textarea,
.ds-select {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-family: inherit;
    font-size: var(--ds-size-md);
    font-weight: 500;
    color: var(--ds-text-1);
    background: var(--ds-bg-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    outline: none;
    transition: border-color var(--ds-dur-fast), box-shadow var(--ds-dur-fast), background var(--ds-dur-fast);
    line-height: 1.4;
}
.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--ds-text-4); font-weight: 400; }
.ds-input:hover,
.ds-textarea:hover,
.ds-select:hover { border-color: var(--ds-border-strong); }
.ds-input:focus,
.ds-textarea:focus,
.ds-select:focus { border-color: var(--ds-accent); box-shadow: var(--ds-focus-ring); }
.ds-input[aria-invalid="true"],
.ds-textarea[aria-invalid="true"] { border-color: var(--ds-red-500); }
.ds-input[aria-invalid="true"]:focus,
.ds-textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(239,68,68,.16); }
.ds-input:disabled,
.ds-textarea:disabled,
.ds-select:disabled { opacity: .55; cursor: not-allowed; background: var(--ds-bg-2); }

.ds-textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.ds-input-sm { padding: 7px 11px; font-size: var(--ds-size-sm); }
.ds-input-lg { padding: 12px 16px; font-size: var(--ds-size-lg); }

.ds-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

/* Form layout */
.ds-field { display: flex; flex-direction: column; gap: 6px; }
.ds-label {
    font-size: var(--ds-size-sm);
    font-weight: 600;
    color: var(--ds-text-2);
}
.ds-hint {
    font-size: var(--ds-size-xs);
    color: var(--ds-text-3);
    line-height: 1.4;
}
.ds-error {
    font-size: var(--ds-size-xs);
    color: var(--ds-red-700);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

/* Checkbox / Radio (custom) */
.ds-check {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--ds-size-base);
    color: var(--ds-text-1);
}
.ds-check input { position: absolute; opacity: 0; pointer-events: none; }
.ds-check-box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--ds-border-strong);
    background: var(--ds-bg-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    transition: all var(--ds-dur-fast);
}
.ds-check input:checked + .ds-check-box {
    background: var(--ds-accent);
    border-color: var(--ds-accent);
}
.ds-check input:focus-visible + .ds-check-box { box-shadow: var(--ds-focus-ring); }

/* Switch */
.ds-switch {
    width: 36px; height: 20px;
    background: var(--ds-gray-300);
    border-radius: 9999px;
    position: relative;
    transition: background var(--ds-dur-fast);
    flex-shrink: 0;
}
.ds-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--ds-dur-fast) var(--ds-ease);
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.ds-check input:checked ~ .ds-switch {
    background: var(--ds-accent);
}
.ds-check input:checked ~ .ds-switch::after { transform: translateX(16px); }

/* ═══════════════════════════════════════════════════════════
   9. BADGES — .ds-badge
   ═══════════════════════════════════════════════════════════ */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--ds-size-xs);
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-bg-2);
    color: var(--ds-text-2);
    border: 1px solid transparent;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.ds-badge-brand   { background: var(--ds-brand-50);   color: var(--ds-brand-700); }
.ds-badge-success { background: var(--ds-brand-50);   color: var(--ds-brand-700); }
.ds-badge-warning { background: var(--ds-amber-100);  color: var(--ds-amber-700); }
.ds-badge-danger  { background: var(--ds-red-100);    color: var(--ds-red-700); }
.ds-badge-info    { background: var(--ds-blue-100);   color: var(--ds-blue-700); }
.ds-badge-violet  { background: var(--ds-violet-100); color: var(--ds-violet-600); }

.ds-badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ds-badge-pulse::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: dsPulse 2s ease-in-out infinite;
    margin-right: 4px;
}
@keyframes dsPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(1.4); }
}

/* ═══════════════════════════════════════════════════════════
   10. KBD — .ds-kbd (keyboard shortcut display)
   ═══════════════════════════════════════════════════════════ */
.ds-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-family: var(--ds-font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-text-2);
    background: var(--ds-bg-2);
    border: 1px solid var(--ds-border);
    border-bottom-width: 2px;
    border-radius: var(--ds-radius-sm);
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   11. SKELETON LOADER — .ds-skel
   ═══════════════════════════════════════════════════════════ */
.ds-skel {
    background: linear-gradient(90deg,
        var(--ds-bg-2) 0%,
        var(--ds-bg-3) 50%,
        var(--ds-bg-2) 100%);
    background-size: 200% 100%;
    border-radius: var(--ds-radius-md);
    animation: dsShimmer 1.4s linear infinite;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}
@keyframes dsShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.ds-skel-text { height: 12px; border-radius: 6px; }
.ds-skel-title { height: 18px; border-radius: 6px; }
.ds-skel-circle { border-radius: 50%; }

/* ═══════════════════════════════════════════════════════════
   12. TOAST SYSTEM — .ds-toast (sonner-style)
   ═══════════════════════════════════════════════════════════ */
#ds-toast-region {
    position: fixed;
    top: var(--ds-space-4);
    right: var(--ds-space-4);
    z-index: var(--ds-z-toast);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--ds-space-2);
    pointer-events: none;
    max-width: calc(100vw - var(--ds-space-8));
    width: 360px;
}
.ds-toast {
    pointer-events: auto;
    background: var(--ds-elevated);
    color: var(--ds-text-1);
    padding: 12px 14px;
    border-radius: var(--ds-radius-lg);
    border: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-lg);
    font-size: var(--ds-size-base);
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: dsToastIn .35s var(--ds-ease-out) both;
    position: relative;
}
.ds-toast.is-leaving {
    animation: dsToastOut .25s var(--ds-ease-in) both;
}
@keyframes dsToastIn {
    from { opacity: 0; transform: translateX(20px) scale(.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes dsToastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}
.ds-toast-icon {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    color: #fff;
}
.ds-toast-success .ds-toast-icon { background: var(--ds-brand-500); }
.ds-toast-error   .ds-toast-icon { background: var(--ds-red-500); }
.ds-toast-warning .ds-toast-icon { background: var(--ds-amber-500); }
.ds-toast-info    .ds-toast-icon { background: var(--ds-blue-500); }
.ds-toast-body { flex: 1; min-width: 0; }
.ds-toast-title { font-weight: 600; margin-bottom: 1px; }
.ds-toast-msg { color: var(--ds-text-2); font-size: var(--ds-size-sm); }
.ds-toast-close {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ds-text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    transition: background var(--ds-dur-fast);
}
.ds-toast-close:hover { background: var(--ds-bg-2); color: var(--ds-text-1); }

@media(max-width: 600px) {
    #ds-toast-region {
        top: auto;
        bottom: calc(var(--ds-mob-nav-h, 70px) + var(--ds-space-3));
        left: var(--ds-space-3);
        right: var(--ds-space-3);
        width: auto;
    }
}

/* ═══════════════════════════════════════════════════════════
   13. TOOLTIP — .ds-tip
   ═══════════════════════════════════════════════════════════ */
.ds-tip {
    position: relative;
    display: inline-flex;
}
.ds-tip[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--ds-gray-950);
    color: var(--ds-gray-0);
    padding: 5px 9px;
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-size-xs);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--ds-dur-fast), transform var(--ds-dur-fast);
    z-index: var(--ds-z-tooltip);
}
.ds-tip:hover::after,
.ds-tip:focus-within::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   14. ANIMATIONS — utility classes
   ═══════════════════════════════════════════════════════════ */
.ds-fade-in { animation: dsFadeIn var(--ds-dur-base) var(--ds-ease-out) both; }
@keyframes dsFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ds-fade-up { animation: dsFadeUp var(--ds-dur-slow) var(--ds-ease-out) both; }
@keyframes dsFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ds-slide-down { animation: dsSlideDown var(--ds-dur-base) var(--ds-ease-out) both; }
@keyframes dsSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ds-pop { animation: dsPop var(--ds-dur-base) var(--ds-ease-spring) both; }
@keyframes dsPop {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   15. EMPTY STATE — .ds-empty
   ═══════════════════════════════════════════════════════════ */
.ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--ds-space-12) var(--ds-space-6);
    color: var(--ds-text-3);
}
.ds-empty-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: var(--ds-accent-soft);
    color: var(--ds-accent-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: var(--ds-space-4);
}
.ds-empty-title {
    font-size: var(--ds-size-lg);
    font-weight: 700;
    color: var(--ds-text-1);
    margin-bottom: var(--ds-space-1);
}
.ds-empty-msg {
    font-size: var(--ds-size-base);
    color: var(--ds-text-3);
    line-height: 1.55;
    max-width: 380px;
    margin-bottom: var(--ds-space-5);
}

/* ═══════════════════════════════════════════════════════════
   16. PAGE HEADER — .ds-page-head
   ═══════════════════════════════════════════════════════════ */
.ds-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ds-space-4);
    flex-wrap: wrap;
    padding-bottom: var(--ds-space-4);
    margin-bottom: var(--ds-space-5);
    border-bottom: 1px solid var(--ds-border-soft);
}
.ds-page-head-left { flex: 1; min-width: 240px; }
.ds-page-eyebrow {
    font-size: var(--ds-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ds-text-3);
    letter-spacing: var(--ds-tracking-wider);
    margin-bottom: 4px;
}
.ds-page-title {
    font-size: var(--ds-size-2xl);
    font-weight: 800;
    color: var(--ds-text-1);
    letter-spacing: var(--ds-tracking-tight);
    line-height: var(--ds-leading-snug);
    margin: 0;
}
.ds-page-sub {
    font-size: var(--ds-size-sm);
    color: var(--ds-text-3);
    margin-top: 4px;
    line-height: var(--ds-leading-relaxed);
}
.ds-page-actions { display: flex; gap: var(--ds-space-2); }

/* ═══════════════════════════════════════════════════════════
   17. SCROLLBAR (subtle)
   ═══════════════════════════════════════════════════════════ */
.ds-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ds-scroll::-webkit-scrollbar-track { background: transparent; }
.ds-scroll::-webkit-scrollbar-thumb {
    background: var(--ds-border-strong);
    border-radius: 4px;
}
.ds-scroll::-webkit-scrollbar-thumb:hover { background: var(--ds-text-4); }

/* Page transitions */
.tasko-transition-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 100%;
    height: 2px;
    pointer-events: none;
    opacity: 0;
    transform: scaleX(.18);
    transform-origin: left center;
    background: linear-gradient(90deg, #1e3163, #3b82f6);
    box-shadow: 0 0 10px rgba(59, 130, 246, .35);
    transition: opacity .12s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
body.tasko-page-leaving {
    cursor: progress;
}
body.tasko-page-leaving .tasko-transition-bar {
    opacity: 1;
    transform: scaleX(.82);
}
@media (prefers-reduced-motion: reduce) {
    .tasko-transition-bar {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   END OF DESIGN SYSTEM v1.0
   ═══════════════════════════════════════════════════════════ */