/* ============================================================
   Design Tokens 2026 — Kokomailo  ·  Monday.com-inspired
   Fresh, vibrant, enterprise-grade.
   ============================================================ */

:root {
  /* ── Brand (Monday.com-inspired vivid indigo-violet) ─ */
  --k-primary:              #5046E4;
  --k-primary-hover:        #3D34C2;
  --k-primary-dark:         #2E27A0;
  --k-primary-light:        #EDEEFE;
  --k-primary-ultra-light:  #F4F4FD;
  --k-on-primary:           #ffffff;
  --k-gradient:             linear-gradient(135deg, #5046E4 0%, #7C3AED 100%);
  --k-gradient-vibrant:     linear-gradient(135deg, #5046E4 0%, #EC4899 100%);
  --k-gradient-warm:        linear-gradient(135deg, #F97316 0%, #EF4444 100%);
  --k-gradient-cool:        linear-gradient(135deg, #0EA5E9 0%, #5046E4 100%);
  --k-gradient-fresh:       linear-gradient(135deg, #00C875 0%, #00A9A0 100%);
  --k-gradient-subtle:      linear-gradient(135deg, #F5F6FA 0%, #EDEEFE 50%, #F4F0FE 100%);
  --k-gradient-dark:        linear-gradient(135deg, #1A1A2E 0%, #25245A 50%, #1A1A2E 100%);

  /* ── Sidebar (Dark Navy — Monday.com signature) ──────── */
  --k-sidebar-bg:           #1A1A2E;
  --k-sidebar-bg-hover:     rgba(255,255,255,0.07);
  --k-sidebar-bg-active:    rgba(80,70,228,0.22);
  --k-sidebar-text:         rgba(255,255,255,0.62);
  --k-sidebar-text-active:  #ffffff;
  --k-sidebar-icon-active:  #7B7EF4;
  --k-sidebar-border:       rgba(255,255,255,0.06);
  --k-sidebar-logo-bg:      linear-gradient(135deg, #5046E4 0%, #7C3AED 100%);

  /* ── Accent Colors (Monday.com vibrant palette) ──────── */
  --k-cyan:     #00C9E4;
  --k-emerald:  #00C875;
  --k-rose:     #E2445C;
  --k-amber:    #FDBC11;
  --k-sky:      #0073EA;
  --k-violet:   #7C3AED;
  --k-pink:     #FF158A;
  --k-orange:   #FF7D38;
  --k-teal:     #00A9A0;
  --k-lime:     #AADB1E;

  /* ── ESP Brand Colors ────────────────────────────────── */
  --k-esp-google:    #EA4335;
  --k-esp-microsoft: #00A4EF;
  --k-esp-yahoo:     #720E9E;
  --k-esp-zoho:      #E42527;

  /* ── Semantic Colors (vibrant, Monday.com) ───────────── */
  --k-success:             #00C875;
  --k-success-light:       #D7F7E5;
  --k-success-dark:        #007038;
  --k-error:               #E2445C;
  --k-error-light:         #FDEAEA;
  --k-error-dark:          #8B0000;
  --k-warning:             #FDBC11;
  --k-warning-light:       #FFF4CC;
  --k-warning-dark:        #7A5400;
  --k-info:                #0073EA;
  --k-info-light:          #D5EEFF;
  --k-info-dark:           #003B78;

  /* ── Page Background (off-white, not stark white) ────── */
  --k-bg:                  #F5F6FA;
  --k-bg-mesh:             #F5F6FA;
  --k-surface:             #FFFFFF;
  --k-surface-hover:       #F8F9FC;
  --k-surface-raised:      #FFFFFF;
  --k-surface-sunken:      #F1F3F8;
  --k-surface-glass:       rgba(255,255,255,0.85);
  --k-border:              #E6E9F4;
  --k-border-light:        #EEF0F8;
  --k-border-focus:        #5046E4;
  --k-text:                #323338;
  --k-text-secondary:      #676879;
  --k-text-tertiary:       #9699A6;
  --k-text-inverse:        #ffffff;
  --k-scrim:               rgba(26,26,46,0.55);

  /* ── Elevation ───────────────────────────────────────── */
  --k-shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --k-shadow-sm:  0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --k-shadow-md:  0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  --k-shadow-lg:  0 8px 24px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);
  --k-shadow-xl:  0 20px 40px rgba(0,0,0,0.10), 0 6px 12px rgba(0,0,0,0.06);
  --k-shadow-primary:   0 4px 16px rgba(80,70,228,0.28);
  --k-shadow-success:   0 4px 14px rgba(0,200,117,0.28);
  --k-shadow-error:     0 4px 14px rgba(226,68,92,0.28);
  --k-shadow-glow:      0 0 24px rgba(80,70,228,0.18);
  --k-shadow-dropdown:  0 16px 40px rgba(26,26,46,0.14), 0 4px 12px rgba(26,26,46,0.08);

  /* ── Typography ──────────────────────────────────────── */
  --k-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --k-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --k-text-display:   700 36px/1.15 var(--k-font);
  --k-text-h1:        700 26px/1.3 var(--k-font);
  --k-text-h2:        600 20px/1.35 var(--k-font);
  --k-text-h3:        600 16px/1.4 var(--k-font);
  --k-text-h4:        600 14px/1.5 var(--k-font);
  --k-text-body:      400 14px/1.6 var(--k-font);
  --k-text-body-lg:   400 15px/1.6 var(--k-font);
  --k-text-small:     400 13px/1.5 var(--k-font);
  --k-text-xs:        500 11px/1.5 var(--k-font);
  --k-text-label:     500 13px/1 var(--k-font);
  --k-text-label-sm:  600 11px/1 var(--k-font);
  --k-text-number:    700 30px/1 var(--k-font);
  --k-text-number-lg: 800 40px/1 var(--k-font);

  /* ── Shape ───────────────────────────────────────────── */
  --k-radius-xs:   6px;
  --k-radius-sm:   8px;
  --k-radius-md:   12px;
  --k-radius-lg:   16px;
  --k-radius-xl:   20px;
  --k-radius-2xl:  24px;
  --k-radius-full: 9999px;

  /* ── Motion ──────────────────────────────────────────── */
  --k-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --k-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --k-ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  --k-dur-fast:    100ms;
  --k-dur-normal:  180ms;
  --k-dur-medium:  300ms;
  --k-dur-slow:    450ms;

  /* ── Layout ──────────────────────────────────────────── */
  --k-topbar-h:  58px;
  --k-sidebar-w: 68px;
  --k-page-max:  1440px;
  --k-header-h:  58px;
  --k-nav-h:     0px;

  /* ── Backward compat aliases ─────────────────────────── */
  --md-sys-color-primary: var(--k-primary);
  --md-sys-color-on-primary: var(--k-on-primary);
  --md-sys-color-error: var(--k-error);
  --md-sys-color-on-error: #fff;
  --md-sys-color-tertiary: var(--k-emerald);
  --md-sys-color-on-tertiary: #fff;
  --md-sys-color-surface: var(--k-surface);
  --md-sys-color-on-surface: var(--k-text);
  --md-sys-color-on-surface-variant: var(--k-text-secondary);
  --md-sys-color-outline: var(--k-border);
  --md-sys-color-outline-variant: var(--k-border-light);
  --md-sys-color-surface-container-low: var(--k-surface-sunken);
  --md-sys-color-surface-container: var(--k-border);
  --md-sys-color-surface-dim: var(--k-bg);
  --md-sys-color-inverse-surface: #1A1A2E;
  --md-sys-color-inverse-on-surface: #fff;
  --md-sys-color-scrim: var(--k-scrim);
  --md-sys-color-warning: var(--k-warning);
  --md-sys-color-warning-container: var(--k-warning-light);
  --md-sys-color-error-container: var(--k-error-light);
  --md-sys-color-on-error-container: var(--k-error-dark);
  --md-sys-color-tertiary-container: var(--k-success-light);
  --md-sys-color-on-tertiary-container: var(--k-success-dark);
  --md-sys-color-primary-container: var(--k-info-light);
  --md-sys-color-on-primary-container: var(--k-info-dark);
  --md-sys-typescale-display-large:  var(--k-text-h1);
  --md-sys-typescale-headline-large: var(--k-text-h1);
  --md-sys-typescale-headline-medium: var(--k-text-h2);
  --md-sys-typescale-title-large:    var(--k-text-h2);
  --md-sys-typescale-title-medium:   var(--k-text-h3);
  --md-sys-typescale-title-small:    var(--k-text-h4);
  --md-sys-typescale-body-large:     var(--k-text-body-lg);
  --md-sys-typescale-body-medium:    var(--k-text-body);
  --md-sys-typescale-body-small:     var(--k-text-small);
  --md-sys-typescale-label-large:    var(--k-text-label);
  --md-sys-typescale-label-medium:   var(--k-text-label);
  --md-sys-typescale-label-small:    var(--k-text-label-sm);
  --slds-brand-primary: var(--k-primary);
  --slds-brand-accessible: var(--k-primary-hover);
  --slds-brand-light: var(--k-primary-light);

  /* ── Extended semantic tokens ─────────────────────────── */
  --k-accent:                   var(--k-primary);
  --k-hover:                    var(--k-surface-hover);

  /* ── Spacing scale (Tailwind v4 compatible — 4px base unit) ── */
  --k-space-px:  1px;
  --k-space-0:   0px;
  --k-space-1:   0.25rem;   /* 4px  */
  --k-space-2:   0.5rem;    /* 8px  */
  --k-space-3:   0.75rem;   /* 12px */
  --k-space-4:   1rem;      /* 16px */
  --k-space-5:   1.25rem;   /* 20px */
  --k-space-6:   1.5rem;    /* 24px */
  --k-space-7:   1.75rem;   /* 28px */
  --k-space-8:   2rem;      /* 32px */
  --k-space-9:   2.25rem;   /* 36px */
  --k-space-10:  2.5rem;    /* 40px */
  --k-space-12:  3rem;      /* 48px */
  --k-space-16:  4rem;      /* 64px */
  --k-space-20:  5rem;      /* 80px */

  /* ── Component size tokens ─────────────────────────────── */
  /* Icon buttons (toggle, menu dots) */
  --k-icon-btn-size:      2.25rem;   /* 36px */
  --k-icon-btn-icon:      1.25rem;   /* 20px */
  --k-icon-btn-sm-size:   2rem;      /* 32px */
  --k-icon-btn-sm-icon:   1.125rem;  /* 18px */

  /* Table / list row */
  --k-row-min-h:          4.5rem;    /* 72px */
  --k-row-padding-v:      0.875rem;  /* 14px */
  --k-row-padding-l:      1rem;      /* 16px */
  --k-row-padding-r:      1.5rem;    /* 24px */

  /* Form controls */
  --k-cb-size:            1.125rem;  /* 18px — checkbox */
  --k-input-h:            2.5rem;    /* 40px */

  /* Progress bar */
  --k-progress-h:         0.25rem;   /* 4px */
  --k-progress-h-thick:   0.375rem;  /* 6px */
  --k-progress-bar-max-w: 6.25rem;   /* 100px */

  /* Status / badge dots */
  --k-dot-sm:             0.375rem;  /* 6px */
  --k-dot-md:             0.75rem;   /* 12px */

  /* Column widths */
  --k-col-actions-w:      5rem;      /* 80px */
  --k-col-status-w:       7.5rem;    /* 120px */
  --k-col-stat-w:         5.5rem;    /* 88px */
  --k-col-progress-w:     9rem;      /* 144px */

  /* Analytics */
  --k-anl-kpi-min-h:      7.5rem;    /* 120px */
  --k-detail-max-w:       72.25rem;  /* ~1156px */
  --k-text-primary:             var(--k-text);
  --k-danger:                   var(--k-error);
  --k-red:                      var(--k-error);
  --k-blue:                     var(--k-info);
  --k-surface-container:        var(--k-border-light);
  --k-surface-container-high:   var(--k-surface-hover);
  --k-surface-container-low:    var(--k-surface-sunken);
  --k-surface-2:                var(--k-border-light);
  --k-surface-3:                var(--k-border);
  --k-surface-alt:              var(--k-surface-sunken);
  --k-surface-header:           #FAFBFE;
  --k-surface-secondary:        #F8F9FC;
  --k-on-surface:               var(--k-text);
  --k-on-surface-variant:       var(--k-text-secondary);
  --k-outline-variant:          var(--k-border-light);
  --k-primary-container:        var(--k-primary-light);
  --k-on-primary-container:     var(--k-primary);
  --k-secondary-container:      var(--k-surface-sunken);
  --k-on-secondary-container:   var(--k-text-secondary);
  --k-text-strong:              #1A1A2E;
  --k-text-muted:               #B0B5C8;
  --k-cta:                      #5046E4;
  --k-cta-hover:                #3D34C2;
  --k-instant-blue:             #5046E4;
  --k-instant-blue-hover:       #3D34C2;
  --k-material-blue:            #5046E4;
  --k-success-mid:              #007038;
  --k-green:                    #00C875;
  --k-amber-dark:               #D97706;
  --k-error-mid:                #C0003A;
  --k-google-red:               #E2445C;
}

/* ── Global Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font: var(--k-text-body);
  color: var(--k-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background: var(--k-bg);
  color: var(--k-text);
  min-height: 100vh;
  overflow: hidden;
}
::selection { background: rgba(80,70,228,0.16); }
:focus-visible {
  outline: 2px solid var(--k-primary);
  outline-offset: 2px;
  border-radius: var(--k-radius-xs);
}
input, button, select, textarea { font-family: var(--k-font); }
a { color: var(--k-primary); text-decoration: none; }
a:hover { color: var(--k-primary-hover); }

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D0D3E6; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #B0B3C8; }

/* ── Material Symbols ──────────────────────────────────── */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; font-size: 20px;
  line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}
  --k-primary-hover:        #4f46e5;
  --k-primary-dark:         #4338ca;
  --k-primary-light:        #eef2ff;
  --k-primary-ultra-light:  #f5f3ff;
  --k-on-primary:           #ffffff;
  --k-gradient:             linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
  --k-gradient-vibrant:     linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
  --k-gradient-warm:        linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  --k-gradient-cool:        linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  --k-gradient-fresh:       linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --k-gradient-subtle:      linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #faf5ff 100%);
  --k-gradient-dark:        linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);

  /* ── Accent Colors ───────────────────────────────── */
  --k-cyan:     #06b6d4;
  --k-emerald:  #10b981;
  --k-rose:     #f43f5e;
  --k-amber:    #f59e0b;
  --k-sky:      #0ea5e9;
  --k-violet:   #8b5cf6;
  --k-pink:     #ec4899;
  --k-orange:   #f97316;

  /* ── ESP Brand Colors ────────────────────────────── */
  --k-esp-google:    #ea4335;
  --k-esp-microsoft: #00a4ef;
  --k-esp-yahoo:     #720e9e;
  --k-esp-zoho:      #e42527;

  /* ── Semantic Colors ─────────────────────────────── */
  --k-success:             #10b981;
  --k-success-light:       #d1fae5;
  --k-success-dark:        #065f46;
  --k-error:               #ef4444;
  --k-error-light:         #fee2e2;
  --k-error-dark:          #991b1b;
  --k-warning:             #f59e0b;
  --k-warning-light:       #fef3c7;
  --k-warning-dark:        #92400e;
  --k-info:                #3b82f6;
  --k-info-light:          #dbeafe;
  --k-info-dark:           #1e40af;

  /* ── Surfaces ────────────────────────────────────── */
  --k-bg:                  #ffffff;
  --k-bg-mesh:             radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.04) 0%, transparent 50%),
                           radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.04) 0%, transparent 50%),
                           radial-gradient(ellipse at 40% 80%, rgba(6,182,212,0.03) 0%, transparent 50%),
                           #ffffff;
  --k-surface:             #ffffff;
  --k-surface-hover:       #f8fafc;
  --k-surface-raised:      #ffffff;
  --k-surface-sunken:      #f1f5f9;
  --k-surface-glass:       rgba(255,255,255,0.72);
  --k-border:              #e2e8f0;
  --k-border-light:        #f1f5f9;
  --k-border-focus:        #6366f1;
  --k-text:                #0f172a;
  --k-text-secondary:      #64748b;
  --k-text-tertiary:       #94a3b8;
  --k-text-inverse:        #ffffff;
  --k-scrim:               rgba(15,23,42,0.5);

  /* ── Elevation (Colored Shadows) ─────────────────── */
  --k-shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --k-shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --k-shadow-md:  0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  --k-shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.04);
  --k-shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --k-shadow-primary:   0 4px 14px rgba(99,102,241,0.25);
  --k-shadow-success:   0 4px 14px rgba(16,185,129,0.25);
  --k-shadow-error:     0 4px 14px rgba(239,68,68,0.25);
  --k-shadow-glow:      0 0 20px rgba(99,102,241,0.15);
  --k-shadow-dropdown:  0 24px 54px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08);

  /* ── Typography (Inter — 2026 Standard) ──────────── */
  --k-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --k-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --k-text-display:   600 36px/1.2 var(--k-font);
  --k-text-h1:        700 28px/1.3 var(--k-font);
  --k-text-h2:        600 22px/1.35 var(--k-font);
  --k-text-h3:        600 18px/1.4 var(--k-font);
  --k-text-h4:        600 15px/1.5 var(--k-font);
  --k-text-body:      400 14px/1.6 var(--k-font);
  --k-text-body-lg:   400 15px/1.6 var(--k-font);
  --k-text-small:     400 13px/1.5 var(--k-font);
  --k-text-xs:        500 11px/1.5 var(--k-font);
  --k-text-label:     500 13px/1 var(--k-font);
  --k-text-label-sm:  600 11px/1 var(--k-font);
  --k-text-number:    700 32px/1 var(--k-font);
  --k-text-number-lg: 800 42px/1 var(--k-font);

  /* ── Shape (Smooth Radii) ────────────────────────── */
  --k-radius-xs:   6px;
  --k-radius-sm:   8px;
  --k-radius-md:   12px;
  --k-radius-lg:   16px;
  --k-radius-xl:   20px;
  --k-radius-2xl:  24px;
  --k-radius-full: 9999px;

  /* ── Motion (Spring-like) ────────────────────────── */
  --k-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --k-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --k-ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  --k-dur-fast:    120ms;
  --k-dur-normal:  200ms;
  --k-dur-medium:  350ms;
  --k-dur-slow:    500ms;

  /* ── Layout ──────────────────────────────────────── */
  --k-topbar-h:  76px;
  --k-sidebar-w: 90px;
  --k-page-max:  1400px;
  /* backward compat — deprecated, use --k-topbar-h */
  --k-header-h:  76px;
  --k-nav-h:     0px;

  /* ── Backward compat aliases ─────────────────────── */
  --md-sys-color-primary: var(--k-primary);
  --md-sys-color-on-primary: var(--k-on-primary);
  --md-sys-color-error: var(--k-error);
  --md-sys-color-on-error: #fff;
  --md-sys-color-tertiary: var(--k-emerald);
  --md-sys-color-on-tertiary: #fff;
  --md-sys-color-surface: var(--k-surface);
  --md-sys-color-on-surface: var(--k-text);
  --md-sys-color-on-surface-variant: var(--k-text-secondary);
  --md-sys-color-outline: var(--k-border);
  --md-sys-color-outline-variant: var(--k-border-light);
  --md-sys-color-surface-container-low: var(--k-surface-sunken);
  --md-sys-color-surface-container: var(--k-border);
  --md-sys-color-surface-dim: var(--k-bg);
  --md-sys-color-inverse-surface: #1e293b;
  --md-sys-color-inverse-on-surface: #fff;
  --md-sys-color-scrim: var(--k-scrim);
  --md-sys-color-warning: var(--k-warning);
  --md-sys-color-warning-container: var(--k-warning-light);
  --md-sys-color-error-container: var(--k-error-light);
  --md-sys-color-on-error-container: var(--k-error-dark);
  --md-sys-color-tertiary-container: var(--k-success-light);
  --md-sys-color-on-tertiary-container: var(--k-success-dark);
  --md-sys-color-primary-container: var(--k-info-light);
  --md-sys-color-on-primary-container: var(--k-info-dark);
  /* ── Typescale compat aliases ─────────────────────── */
  --md-sys-typescale-display-large:  var(--k-text-h1);
  --md-sys-typescale-headline-large: var(--k-text-h1);
  --md-sys-typescale-headline-medium: var(--k-text-h2);
  --md-sys-typescale-title-large:    var(--k-text-h2);
  --md-sys-typescale-title-medium:   var(--k-text-h3);
  --md-sys-typescale-title-small:    var(--k-text-h4);
  --md-sys-typescale-body-large:     var(--k-text-body-lg);
  --md-sys-typescale-body-medium:    var(--k-text-body);
  --md-sys-typescale-body-small:     var(--k-text-small);
  --md-sys-typescale-label-large:    var(--k-text-label);
  --md-sys-typescale-label-medium:   var(--k-text-label);
  --md-sys-typescale-label-small:    var(--k-text-label-sm);
  --slds-brand-primary: var(--k-primary);
  --slds-brand-accessible: var(--k-primary-hover);
  --slds-brand-light: var(--k-primary-light);

  /* ── Missing token aliases (fixes undefined-var references) ─── */
  --k-accent:                   var(--k-primary);
  --k-hover:                    var(--k-surface-hover);
  --k-text-primary:             var(--k-text);
  --k-danger:                   var(--k-error);
  --k-red:                      var(--k-error);
  --k-blue:                     var(--k-info);
  --k-surface-container:        var(--k-border-light);
  --k-surface-container-high:   var(--k-surface-hover);
  --k-surface-container-low:    var(--k-surface-sunken);
  --k-surface-2:                var(--k-border-light);
  --k-surface-3:                var(--k-border);
  --k-surface-alt:              var(--k-surface-sunken);
  --k-surface-header:           #f8fafc;
  --k-on-surface:               var(--k-text);
  --k-on-surface-variant:       var(--k-text-secondary);
  --k-outline-variant:          var(--k-border-light);
  --k-primary-container:        var(--k-primary-light);
  --k-on-primary-container:     var(--k-primary);
  --k-secondary-container:      var(--k-surface-sunken);
  --k-on-secondary-container:   var(--k-text-secondary);

  /* ── Extended semantic tokens ─────────────────────── */
  --k-text-strong:              #14171f;
  --k-text-muted:               #b0b5be;
  --k-cta:                      #4580f7;
  --k-cta-hover:                #3a6fd8;
  --k-instant-blue:             #006bff;
  --k-instant-blue-hover:       #0055d4;
  --k-material-blue:            #1976d2;
  --k-success-mid:              #16a34a;
  --k-green:                    #22c55e;
  --k-amber-dark:               #d97706;
  --k-error-mid:                #dc2626;
  --k-google-red:               #d93025;
}

/* ── Global Reset ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font: var(--k-text-body);
  color: var(--k-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background: var(--k-bg);
  color: var(--k-text);
  min-height: 100vh;
  overflow: hidden;
}
::selection { background: rgba(99,102,241,0.18); }
:focus-visible {
  outline: 2px solid var(--k-primary);
  outline-offset: 2px;
  border-radius: var(--k-radius-xs);
}
input, button, select, textarea { font-family: var(--k-font); }
a { color: var(--k-primary); text-decoration: none; }
a:hover { color: var(--k-primary-hover); }

/* ── Scrollbar (Tailwind-thin) ─────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--k-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--k-text-tertiary);
}

/* ── Material Symbols (used as SLDS utility icons) ── */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; font-size: 20px;
  line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}
.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

/* focus-visible handled in global reset above */

/* ── Loading splash ────────────────────────────────── */
.app-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100vh; gap: 16px;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-large);
}
.loading-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--md-sys-color-surface-container);
  border-top-color: var(--slds-brand-primary, #1b96ff);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Selection colour (SLDS blue) ──────────────────── */
::selection {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

/* ============================================================
   Dark Mode Overrides — 2026
   ============================================================ */
[data-theme="dark"] {
  --k-bg:                  #0b0f1a;
  --k-bg-mesh:             radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.08) 0%, transparent 50%),
                           radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.07) 0%, transparent 50%),
                           radial-gradient(ellipse at 40% 80%, rgba(6,182,212,0.05) 0%, transparent 50%),
                           #0b0f1a;
  --k-surface:             #131929;
  --k-surface-hover:       #1a2236;
  --k-surface-raised:      #1c2437;
  --k-surface-sunken:      #0d1120;
  --k-surface-glass:       rgba(13,17,32,0.82);
  --k-border:              #1e2d45;
  --k-border-light:        #162030;
  --k-border-focus:        #6366f1;

  --k-text:                #e2e8f0;
  --k-text-secondary:      #94a3b8;
  --k-text-tertiary:       #475569;
  --k-text-inverse:        #0f172a;

  --k-primary-light:       rgba(99,102,241,0.15);
  --k-primary-ultra-light: rgba(99,102,241,0.08);

  --k-success-light:       rgba(16,185,129,0.15);
  --k-success-dark:        #6ee7b7;
  --k-error-light:         rgba(239,68,68,0.15);
  --k-error-dark:          #fca5a5;
  --k-warning-light:       rgba(245,158,11,0.15);
  --k-warning-dark:        #fcd34d;
  --k-info-light:          rgba(59,130,246,0.15);
  --k-info-dark:           #93c5fd;

  --k-shadow-xs:  0 1px 2px rgba(0,0,0,0.25);
  --k-shadow-sm:  0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --k-shadow-md:  0 4px 6px -1px rgba(0,0,0,0.35), 0 2px 4px -2px rgba(0,0,0,0.25);
  --k-shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.25);
  --k-shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.3);
  --k-shadow-primary:   0 4px 14px rgba(99,102,241,0.4);
  --k-shadow-success:   0 4px 14px rgba(16,185,129,0.4);
  --k-shadow-error:     0 4px 14px rgba(239,68,68,0.4);
  --k-shadow-glow:      0 0 20px rgba(99,102,241,0.25);
  --k-shadow-dropdown:  0 24px 54px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.4);

  --k-scrim: rgba(0,0,0,0.7);

  /* MD system compat */
  --md-sys-color-surface-dim:            var(--k-bg);
  --md-sys-color-surface:                var(--k-surface);
  --md-sys-color-surface-container:      var(--k-border);
  --md-sys-color-surface-container-high: #2a3550;
  --md-sys-color-surface-container-low:  var(--k-surface-sunken);
  --md-sys-color-on-surface:             var(--k-text);
  --md-sys-color-on-surface-variant:     var(--k-text-secondary);
  --md-sys-color-outline:                var(--k-border);
  --md-sys-color-outline-variant:        var(--k-border-light);
  --md-sys-color-inverse-surface:        #e2e8f0;
  --md-sys-color-inverse-on-surface:     #0f172a;
  --md-sys-color-error-container:        var(--k-error-light);
  --md-sys-color-on-error-container:     var(--k-error-dark);
  --md-sys-color-tertiary-container:     var(--k-success-light);
  --md-sys-color-on-tertiary-container:  var(--k-success-dark);
  --md-sys-color-primary-container:      var(--k-primary-light);
  --md-sys-color-on-primary-container:   #a5b4fc;
  --md-sys-color-warning:                var(--k-warning);
  --md-sys-color-warning-container:      var(--k-warning-light);
  --slds-brand-light: #1e2d45;
}

[data-theme="dark"] ::selection {
  background: rgba(99,102,241,0.3);
  color: #e0e7ff;
}

/* ── Animated ambient orbs ─────────────────────────── */
.ambient-orbs {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
/* ── Reduced-motion: disable all animations for accessibility ── */
@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;
  }
}

.ambient-orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
  opacity: 0.35; animation: orbDrift 18s ease-in-out infinite alternate;
}
.ambient-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(99,102,241,0.4) 0%, transparent 70%);
  top: -200px; left: -150px; animation-delay: 0s;
}
.ambient-orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(139,92,246,0.35) 0%, transparent 70%);
  top: -100px; right: -100px; animation-delay: -6s;
}
.ambient-orb-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(6,182,212,0.25) 0%, transparent 70%);
  bottom: 100px; left: 30%; animation-delay: -12s;
}
@keyframes orbDrift {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(40px,-30px) scale(1.05); }
  66%  { transform: translate(-20px,20px) scale(0.95); }
  100% { transform: translate(30px,10px) scale(1.02); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}