/* ============================================
   تسکینو - Design System
   Persian-First Project Management Platform
   ============================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
  /* ══════════════════════════════════════
     FARSIUI — MOON DESIGN TOKENS
     منبع: farsiui.ir (github.com/farsi-ui/ui)
     توکن‌های پایه پایدار تصمیم
     ══════════════════════════════════════ */

  /* ── Moon base tokens (light) ── */
  --piccolo: 250 90% 62%;   /* primary — بنفش نیلی */
  --hit:     174 62% 50%;   /* secondary — فیروزه‌ای */
  --beerus:  240 6% 92%;    /* borders / surfaces */
  --goku:    0 0% 100%;     /* surface */
  --gohan:   0 0% 99%;      /* surface alt */
  --hales:   240 10% 96%;   /* muted surface */
  --hover:   240 10% 98%;   /* hover surface */
  --zenno:   0 0% 52%;      /* muted text */
  --bulma:   240 10% 4%;    /* foreground */
  --trunks:  240 6% 45%;    /* secondary text */
  --goten:   0 0% 100%;     /* on-primary text */
  --popo:    0 0% 0%;
  --krillin: 42 96% 50%;    /* warning — زرد */
  --chichi:  350 100% 65%;  /* pink */
  --roshi:   142 72% 46%;   /* success — سبز */
  --dodoria: 4 88% 58%;     /* danger — قرمز */
  --cell:    174 62% 50%;   /* teal accent */
  --raditz:  30 40% 50%;    /* brown */
  --whis:    220 88% 56%;   /* info — آبی */
  --frieza:  270 68% 60%;   /* accent — بنفش */
  --nappa:   30 20% 40%;    /* muted brown */

  /* ── Semantic color scales (derived from Moon) ── */
  --color-primary-50:  #F3F1FE;
  --color-primary-100: #E3DFFC;
  --color-primary-200: #C8BEF9;
  --color-primary-300: #9986F9;
  --color-primary-400: #785FF7;
  --color-primary-500: #6447F5;   /* piccolo */
  --color-primary-600: #4320F3;
  --color-primary-700: #2F0CDF;
  --color-primary-800: #2F15AC;
  --color-primary-900: #231084;

  --color-secondary-50:  #F3FBFB;
  --color-secondary-100: #E4F7F5;
  --color-secondary-200: #C8EFEB;
  --color-secondary-300: #98E7DF;
  --color-secondary-400: #77DFD5;
  --color-secondary-500: #30CFBF;  /* hit */
  --color-secondary-600: #26B5A6;
  --color-secondary-700: #1E9C8F;
  --color-secondary-800: #2A7D75;
  --color-secondary-900: #20625B;

  --color-success-50:  #F2FCF6;
  --color-success-100: #E2F9EA;
  --color-success-200: #C4F2D5;
  --color-success-300: #91EDB3;
  --color-success-400: #6EE79B;
  --color-success-500: #21CA5F;   /* roshi */
  --color-success-600: #1BB453;
  --color-success-700: #179146;
  --color-success-800: #1F7A42;
  --color-success-900: #1A6438;

  --color-warning-50:  #FEFAF1;
  --color-warning-100: #FDF3DD;
  --color-warning-200: #FBE8BC;
  --color-warning-300: #FCD882;
  --color-warning-400: #FCCB5A;
  --color-warning-500: #FAB005;   /* krillin */
  --color-warning-600: #D99505;
  --color-warning-700: #B87D04;
  --color-warning-800: #96660B;
  --color-warning-900: #7A5309;

  --color-danger-50:  #FDF2F1;
  --color-danger-100: #FBE1DF;
  --color-danger-200: #F8C3BF;
  --color-danger-300: #F78F87;
  --color-danger-400: #F56B61;
  --color-danger-500: #F24236;   /* dodoria */
  --color-danger-600: #DD1C0E;
  --color-danger-700: #B81809;
  --color-danger-800: #91200F;
  --color-danger-900: #6F180A;

  --color-info-50:  #F1F5FD;
  --color-info-100: #DFE8FB;
  --color-info-200: #BFD2F8;
  --color-info-300: #87ADF7;
  --color-info-400: #6192F5;
  --color-info-500: #2C6EF2;   /* whis */
  --color-info-600: #0E53DD;
  --color-info-700: #0B47BC;
  --color-info-800: #14428F;
  --color-info-900: #103570;

  --color-violet-50:  #F7F3FC;
  --color-violet-100: #EDE2F8;
  --color-violet-200: #DBC6F1;
  --color-violet-300: #BF94EB;
  --color-violet-400: #AB72E4;
  --color-violet-500: #9954DE;   /* frieza */
  --color-violet-600: #7E32C9;
  --color-violet-700: #6A25AC;
  --color-violet-800: #57248C;
  --color-violet-900: #421B6C;

  --color-teal-50:  #F4FBFA;
  --color-teal-100: #E5F6F4;
  --color-teal-200: #CBECE9;
  --color-teal-300: #9CE2DB;
  --color-teal-400: #7DD9D0;
  --color-teal-500: #30A69A;   /* cell */
  --color-teal-600: #2B9489;
  --color-teal-700: #247E74;
  --color-teal-800: #2C6B64;
  --color-teal-900: #22544F;

  /* ── Neutral scale (Moon: gohan/goku/hales/beerus/zenno/trunks/bulma) ── */
  --color-slate-25:  #FCFCFC;   /* gohan */
  --color-slate-50:  #F4F4F6;   /* hales */
  --color-slate-100: #E9E9EC;   /* beerus */
  --color-slate-200: #DDDDE2;
  --color-slate-300: #C9C9D1;
  --color-slate-400: #9C9CA6;
  --color-slate-500: #858585;   /* zenno */
  --color-slate-600: #6C6C7A;   /* trunks */
  --color-slate-700: #4A4A55;
  --color-slate-800: #2A2A32;
  --color-slate-900: #1A1A20;
  --color-slate-950: #09090B;   /* bulma */

  /* ── Semantic Colors ── */
  --bg-body:      var(--color-slate-50);     /* hales */
  --bg-card:      var(--color-slate-25);     /* gohan / goku */
  --bg-sidebar:   var(--color-slate-950);
  --bg-topbar:    rgba(255, 255, 255, 0.85);
  --bg-input:     #FFFFFF;
  --bg-hover:     var(--color-slate-100);    /* beerus */
  --bg-active:    var(--color-primary-50);
  --bg-overlay:   rgba(9, 9, 11, 0.5);       /* bulma/50 */

  --text-primary:   var(--color-slate-950);  /* bulma */
  --text-secondary: var(--color-slate-600);  /* trunks */
  --text-muted:     var(--color-slate-500);  /* zenno */
  --text-inverse:   var(--color-slate-25);
  --text-link:      var(--color-primary-600);

  --border-color:     var(--color-slate-200);
  --border-color-light: var(--color-slate-100);
  --border-focus:     var(--color-primary-500);  /* piccolo */

  /* ── Spacing Scale ── */
  --space-0:  0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1:  0.25rem;
  --space-1-5: 0.375rem;
  --space-2:  0.5rem;
  --space-2-5: 0.625rem;
  --space-3:  0.75rem;
  --space-3-5: 0.875rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-9:  2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Typography ── */
  --font-family: 'Vazirmatn', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Vazirmatn', 'Courier New', monospace;

  --text-2xs: 0.625rem;
  --text-xs:  0.75rem;
  --text-sm:  0.8125rem;
  --text-base: 0.875rem;
  --text-md:  0.9375rem;
  --text-lg:  1rem;
  --text-xl:  1.125rem;
  --text-2xl: 1.25rem;
  --text-3xl: 1.5rem;
  --text-4xl: 1.875rem;
  --text-5xl: 2.25rem;

  --leading-none:    1;
  --leading-tight:   1.3;
  --leading-snug:    1.5;
  --leading-normal:  1.7;
  --leading-relaxed: 1.8;
  --leading-loose:   2;

  --font-light:    300;
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold: 800;

  /* ── Border Radius (FarsiUI --radius: 0.625rem) ── */
  --radius:        0.625rem;
  --radius-none: 0;
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.625rem;
  --radius-xl:   0.875rem;
  --radius-2xl:  1.125rem;
  --radius-3xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px 0 rgba(9, 9, 11, 0.05);
  --shadow-sm:  0 1px 3px 0 rgba(9, 9, 11, 0.1), 0 1px 2px -1px rgba(9, 9, 11, 0.1);
  --shadow-md:  0 4px 6px -1px rgba(9, 9, 11, 0.1), 0 2px 4px -2px rgba(9, 9, 11, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(9, 9, 11, 0.1), 0 4px 6px -4px rgba(9, 9, 11, 0.1);
  --shadow-xl:  0 20px 25px -5px rgba(9, 9, 11, 0.1), 0 8px 10px -6px rgba(9, 9, 11, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(9, 9, 11, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(9, 9, 11, 0.05);
  --shadow-glow: 0 0 20px hsl(var(--piccolo) / 0.18);

  /* ── Transitions ── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower:  500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ── */
  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-drawer:   300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
  --z-max:      9999;

  /* ── Layout ── */
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --topbar-height: 64px;
  --content-max-width: 1400px;
}

/* ---------- CSS Reset & Base ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-body);
  direction: rtl;
  text-align: right;
  /* FarsiUI Persian typography treatment */
  letter-spacing: 0.3px;
  word-spacing: 0.1em;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Persian headings need OpenType features (rlig/calt) — FarsiUI base layer */
h1, h2, h3, h4, h5, h6 {
  font-feature-settings: "rlig" 1, "calt" 1;
  letter-spacing: 0;
}

/* FarsiUI focus-visible: piccolo outline */
:focus-visible {
  outline: 2px solid hsl(var(--piccolo));
  outline-offset: 2px;
  border-radius: inherit;
}

/* FarsiUI selection */
::selection {
  background: hsl(var(--piccolo) / 0.3);
  color: hsl(var(--bulma));
}

/* Touch: softer tap highlight on piccolo (FarsiUI) */
@media (pointer: coarse) {
  button, a, [role="button"], .tab, .sidebar-link, .mobile-nav-item {
    -webkit-tap-highlight-color: hsl(var(--piccolo) / 0.12);
  }
}

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

img, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

p {
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

::selection {
  background-color: var(--color-primary-100);
  color: var(--color-primary-900);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-slate-300);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-slate-400);
}

/* ---------- Utility Classes ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ══════════════════════════════════════════
   FARSIUI — RTL & touch utilities
   ══════════════════════════════════════════ */

/* Mirror an icon only when the document is RTL */
.rtl-flip { display: inline-block; }
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* 44px touch targets (FarsiUI) */
.touch-target { min-height: 44px; min-width: 44px; }
.touch-target-sm { min-height: 36px; min-width: 36px; }

/* Safe-area helpers for notched devices */
.safe-area-pt { padding-top: env(safe-area-inset-top, 0px); }
.safe-area-pb { padding-bottom: env(safe-area-inset-bottom, 0px); }
.safe-area-ps { padding-inline-start: env(safe-area-inset-left, 0px); }
.safe-area-pe { padding-inline-end: env(safe-area-inset-right, 0px); }
.safe-area-p {
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* Moon grid container */
.container-moon { width: 100%; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 780px) { .container-moon { max-width: 780px; padding-inline: 16px; } }
@media (min-width: 1728px) { .container-moon { max-width: 1728px; padding-inline: 104px; } }

/* RTL-aware slide animations (FarsiUI) */
[dir="rtl"] .animate-slide-in-right { animation-name: slideInLeft; }
[dir="rtl"] .animate-slide-in-left  { animation-name: slideInRight; }

.text-center { text-align: center; }
.text-start  { text-align: right; }
.text-end    { text-align: left; }

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

.grid { display: grid; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.relative { position: relative; }
.absolute { position: absolute; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transition-all {
  transition: all var(--transition-base);
}

/* ---------- Animations ---------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes timerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in     { animation: fadeIn var(--transition-slow) ease-out; }
.animate-fade-in-up  { animation: fadeInUp var(--transition-slow) ease-out; }
.animate-scale-in    { animation: scaleIn var(--transition-slow) ease-out; }
.animate-slide-up    { animation: slideUp var(--transition-slow) ease-out; }
.animate-pulse       { animation: pulse 2s ease-in-out infinite; }
.animate-spin        { animation: spin 1s linear infinite; }

/* ══════════════════════════════════════════
   DARK THEME — Moon tokens (FarsiUI)
   ══════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --piccolo: 250 85% 65%;
    --hit:     174 55% 45%;
    --beerus:  240 6% 20%;
    --goku:    240 10% 6%;
    --gohan:   240 6% 10%;
    --hales:   240 10% 12%;
    --hover:   240 8% 16%;
    --zenno:   0 0% 80%;
    --bulma:   0 0% 98%;
    --trunks:  240 5% 55%;
    --krillin: 42 95% 55%;
    --chichi:  350 85% 60%;
    --roshi:   142 65% 50%;
    --dodoria: 4 80% 55%;
    --cell:    174 55% 55%;
    --raditz:  30 35% 45%;
    --whis:    220 80% 60%;
    --frieza:  270 65% 65%;
    --nappa:   30 25% 35%;

    --color-primary-500: #735AF2;
    --color-primary-600: #8268F5;
    --color-primary-400: #9183F5;
    --color-primary-200: #4A44C4;
    --color-primary-50:  rgba(115, 90, 242, 0.14);
    --color-primary-100: rgba(115, 90, 242, 0.22);

    --color-secondary-500: #34B2A5;
    --color-secondary-50:  rgba(52, 178, 165, 0.14);
    --color-secondary-100: rgba(52, 178, 165, 0.22);

    --color-success-500: #2DD269;
    --color-success-50:  rgba(45, 210, 105, 0.14);
    --color-success-100: rgba(45, 210, 105, 0.22);

    --color-warning-500: #F9B81F;
    --color-warning-50:  rgba(249, 184, 31, 0.14);
    --color-warning-100: rgba(249, 184, 31, 0.22);

    --color-danger-500: #E83D30;
    --color-danger-50:  rgba(232, 61, 48, 0.14);
    --color-danger-100: rgba(232, 61, 48, 0.22);

    --color-info-500: #477EEB;
    --color-info-50:  rgba(71, 126, 235, 0.14);
    --color-info-100: rgba(71, 126, 235, 0.22);

    --color-teal-500: #34B2A5;
    --color-teal-50:  rgba(52, 178, 165, 0.14);
    --color-teal-100: rgba(52, 178, 165, 0.22);

    --color-violet-500: #A66CE0;
    --color-violet-50:  rgba(166, 108, 224, 0.14);
    --color-violet-100: rgba(166, 108, 224, 0.22);

    --color-slate-25:  #202027;
    --color-slate-50:  #17171D;
    --color-slate-100: #1C1C22;
    --color-slate-200: #303036;
    --color-slate-300: #3E3E47;
    --color-slate-400: #5A5B66;
    --color-slate-500: #878792;
    --color-slate-600: #A0A1AA;
    --color-slate-700: #C5C6CE;
    --color-slate-800: #E2E3E8;
    --color-slate-900: #F1F1F4;
    --color-slate-950: #FAFAFA;

    --bg-body:    var(--color-slate-50);
    --bg-card:    var(--color-slate-100);
    --bg-input:   var(--color-slate-50);
    --bg-hover:   var(--color-slate-200);
    --bg-active:  rgba(115, 90, 242, 0.15);
    --bg-topbar:  rgba(14, 14, 17, 0.85);

    --text-primary:   #FAFAFA;
    --text-secondary: #A0A1AA;
    --text-muted:     #878792;
    --text-link:      #A99BF7;

    --border-color:       #303036;
    --border-color-light: #26262C;

    --bg-overlay: rgba(2, 2, 6, 0.7);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.45), 0 4px 6px -4px rgba(0,0,0,0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.4);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.65);

    color-scheme: dark;
  }
}
html[data-theme="dark"] {
  /* Moon base tokens — dark */
  --piccolo: 250 85% 65%;
  --hit:     174 55% 45%;
  --beerus:  240 6% 20%;
  --goku:    240 10% 6%;
  --gohan:   240 6% 10%;
  --hales:   240 10% 12%;
  --hover:   240 8% 16%;
  --zenno:   0 0% 80%;
  --bulma:   0 0% 98%;
  --trunks:  240 5% 55%;
  --goten:   0 0% 100%;
  --popo:    0 0% 0%;
  --krillin: 42 95% 55%;
  --chichi:  350 85% 60%;
  --roshi:   142 65% 50%;
  --dodoria: 4 80% 55%;
  --cell:    174 55% 55%;
  --raditz:  30 35% 45%;
  --whis:    220 80% 60%;
  --frieza:  270 65% 65%;
  --nappa:   30 25% 35%;

  /* Moon-derived scales — dark */
  --color-primary-500: #735AF2;
  --color-primary-600: #8268F5;
  --color-primary-400: #9183F5;
  --color-primary-200: #4A44C4;
  --color-primary-50:  rgba(115, 90, 242, 0.14);
  --color-primary-100: rgba(115, 90, 242, 0.22);

  --color-secondary-500: #34B2A5;
  --color-secondary-50:  rgba(52, 178, 165, 0.14);
  --color-secondary-100: rgba(52, 178, 165, 0.22);

  --color-success-500: #2DD269;
  --color-success-50:  rgba(45, 210, 105, 0.14);
  --color-success-100: rgba(45, 210, 105, 0.22);

  --color-warning-500: #F9B81F;
  --color-warning-50:  rgba(249, 184, 31, 0.14);
  --color-warning-100: rgba(249, 184, 31, 0.22);

  --color-danger-500: #E83D30;
  --color-danger-50:  rgba(232, 61, 48, 0.14);
  --color-danger-100: rgba(232, 61, 48, 0.22);

  --color-info-500: #477EEB;
  --color-info-50:  rgba(71, 126, 235, 0.14);
  --color-info-100: rgba(71, 126, 235, 0.22);

  --color-teal-500: #34B2A5;
  --color-teal-50:  rgba(52, 178, 165, 0.14);
  --color-teal-100: rgba(52, 178, 165, 0.22);

  --color-violet-500: #A66CE0;
  --color-violet-50:  rgba(166, 108, 224, 0.14);
  --color-violet-100: rgba(166, 108, 224, 0.22);

  /* Neutral scale — dark surfaces */
  --color-slate-25:  #202027;
  --color-slate-50:  #17171D;
  --color-slate-100: #1C1C22;
  --color-slate-200: #303036;
  --color-slate-300: #3E3E47;
  --color-slate-400: #5A5B66;
  --color-slate-500: #878792;
  --color-slate-600: #A0A1AA;
  --color-slate-700: #C5C6CE;
  --color-slate-800: #E2E3E8;
  --color-slate-900: #F1F1F4;
  --color-slate-950: #FAFAFA;

  --bg-body:    var(--color-slate-50);
  --bg-card:    var(--color-slate-100);
  --bg-input:   var(--color-slate-50);
  --bg-hover:   var(--color-slate-200);
  --bg-active:  rgba(115, 90, 242, 0.15);
  --bg-topbar:  rgba(14, 14, 17, 0.85);

  --text-primary:   #FAFAFA;
  --text-secondary: #A0A1AA;
  --text-muted:     #878792;
  --text-link:      #A99BF7;

  --border-color:       #303036;
  --border-color-light: #26262C;
  --border-focus:       var(--color-primary-400);

  --bg-overlay: rgba(2, 2, 6, 0.7);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.45), 0 4px 6px -4px rgba(0,0,0,0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.4);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.65);
  --shadow-glow: 0 0 20px hsl(var(--piccolo) / 0.28);

  color-scheme: dark;
}

/* Dark-theme component adjustments */
html[data-theme="dark"] .sidebar { border-left-color: var(--border-color); }
html[data-theme="dark"] .topbar { background: rgba(14,14,17,0.9); }
html[data-theme="dark"] .topbar-search input { background: #1C1C22; }
html[data-theme="dark"] .avatar-stack .avatar { border-color: var(--bg-card); }
html[data-theme="dark"] .offline-banner { background: #8A5A08; }
html[data-theme="dark"] .toast { background: #1C1C22; color: #FAFAFA; border: 1px solid var(--border-color); }
html[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
html[data-theme="dark"] .mobile-bottom-nav { background: #17171D; }
html[data-theme="dark"] .notification-dot { border-color: #17171D; }