/* ============================================================
   Harmony Design System — Design Tokens
   Generated from design.json
   ============================================================ */

:root {
  font-size: 12.8px; /* 80% scale */

  /* ---- Colors: Brand Purple ---- */
  --color-brand-50: rgb(246, 245, 254);
  --color-brand-100: rgb(231, 229, 253);
  --color-brand-200: rgb(193, 189, 250);
  --color-brand-300: rgb(160, 153, 248);
  --color-brand-400: rgb(122, 112, 246);
  --color-brand-500: rgb(89, 77, 246);
  --color-brand-600: rgb(28, 11, 245);
  --color-brand-700: rgb(15, 1, 191);
  --color-brand-800: rgb(9, 0, 127);
  --color-brand-900: rgb(5, 0, 63);
  --color-brand-950: rgb(2, 0, 29);

  /* ---- Colors: Backgrounds ---- */
  --color-bg-default: rgb(255, 255, 255);
  --color-bg-disabled: rgb(244, 244, 245);
  --color-bg-elevated: rgb(244, 244, 245);
  --color-bg-subtle: rgb(246, 248, 249);
  --color-bg-strong: rgb(228, 228, 231);
  --color-bg-inverse: rgb(24, 24, 27);

  --color-bg-primary-default: rgb(89, 77, 246);
  --color-bg-primary-hover: rgba(89, 77, 246, 0.9);
  --color-bg-primary-active: rgb(89, 77, 246);

  --color-bg-secondary-default: rgb(244, 244, 245);
  --color-bg-secondary-hover: rgb(228, 228, 231);
  --color-bg-secondary-active: rgb(244, 244, 245);

  --color-bg-interactive-default: rgb(37, 99, 235);
  --color-bg-interactive-hover: rgb(29, 78, 216);
  --color-bg-interactive-active: rgb(30, 64, 175);

  --color-bg-interactive-muted-default: rgb(239, 246, 255);
  --color-bg-interactive-muted-hover: rgb(219, 234, 254);
  --color-bg-interactive-muted-active: rgb(191, 219, 254);

  --color-bg-error-muted-default: rgb(254, 242, 242);
  --color-bg-error-muted-hover: rgb(254, 226, 226);
  --color-bg-error-muted-active: rgb(254, 202, 202);

  --color-bg-error-strong-default: rgb(220, 38, 38);
  --color-bg-error-strong-hover: rgb(185, 28, 28);
  --color-bg-error-strong-active: rgb(220, 38, 38);

  --color-bg-info-muted-default: rgb(239, 246, 255);
  --color-bg-info-muted-hover: rgb(219, 234, 254);
  --color-bg-info-muted-active: rgb(191, 219, 254);
  --color-bg-info-strong: rgb(37, 99, 235);

  --color-bg-success-muted-default: rgb(240, 253, 244);
  --color-bg-success-muted-hover: rgb(240, 253, 244);
  --color-bg-success-muted-active: rgb(220, 252, 231);
  --color-bg-success-strong: rgb(5, 150, 105);

  --color-bg-warning-muted-default: rgb(254, 252, 232);
  --color-bg-warning-muted-hover: rgb(254, 249, 195);
  --color-bg-warning-muted-active: rgb(254, 240, 138);
  --color-bg-warning-strong: rgb(234, 179, 8);

  --color-bg-magic-default: rgb(124, 58, 237);
  --color-bg-magic-hover: rgb(109, 40, 217);
  --color-bg-magic-active: rgb(91, 33, 182);

  --color-bg-magic-muted-default: rgb(245, 243, 255);
  --color-bg-magic-muted-hover: rgb(237, 233, 254);
  --color-bg-magic-muted-active: rgb(221, 214, 254);

  /* ---- Colors: Borders ---- */
  --color-border-default: rgb(228, 228, 231);
  --color-border-disabled: rgb(229, 231, 235);
  --color-border-hover: rgb(212, 212, 216);
  --color-border-primary: rgb(24, 24, 27);
  --color-border-on-color: rgb(250, 250, 250);
  --color-border-focus-ring: rgb(59, 130, 246);

  --color-border-input-default: rgb(228, 228, 231);
  --color-border-input-hover: rgb(212, 212, 216);

  --color-border-interactive-default: rgb(59, 130, 246);
  --color-border-interactive-hover: rgb(37, 99, 235);
  --color-border-interactive-active: rgb(29, 78, 216);
  --color-border-interactive-focus: rgb(59, 130, 246);

  --color-border-error-default: rgb(220, 38, 38);
  --color-border-error-hover: rgb(185, 28, 28);
  --color-border-error-active: rgb(153, 27, 27);
  --color-border-error-muted: rgb(248, 113, 113);

  --color-border-info-default: rgb(37, 99, 235);
  --color-border-info-muted: rgb(96, 165, 250);

  --color-border-success-default: rgb(16, 185, 129);
  --color-border-success-muted: rgb(110, 231, 183);

  --color-border-warning-default: rgb(202, 138, 4);
  --color-border-warning-muted: rgb(250, 204, 21);

  --color-border-magic-default: rgb(124, 58, 237);
  --color-border-magic-muted: rgb(196, 181, 253);

  /* ---- Colors: Text ---- */
  --color-text-default: rgb(2, 0, 29);
  --color-text-disabled: rgb(161, 161, 170);
  --color-text-muted: rgb(82, 82, 91);
  --color-text-placeholder: rgb(102, 109, 128);
  --color-text-inverse: rgb(243, 244, 246);
  --color-text-on-color: rgb(255, 255, 255);

  --color-text-primary-default: rgb(89, 77, 246);
  --color-text-primary-hover: rgb(39, 39, 42);

  --color-text-interactive-default: rgb(37, 99, 235);
  --color-text-interactive-strong: rgb(30, 58, 138);

  --color-text-error-default: rgb(220, 38, 38);
  --color-text-error-active: rgb(127, 29, 29);
  --color-text-error-strong: rgb(69, 10, 10);

  --color-text-info-default: rgb(37, 99, 235);
  --color-text-info-strong: rgb(30, 58, 138);

  --color-text-success-default: rgb(4, 120, 87);
  --color-text-success-strong: rgb(2, 44, 34);

  --color-text-warning-default: rgb(161, 98, 7);
  --color-text-warning-strong: rgb(66, 32, 6);

  --color-text-magic-default: rgb(28, 11, 245);
  --color-text-magic-strong: rgb(5, 0, 63);

  /* ---- Colors: Icons ---- */
  --color-icon-default: rgb(113, 113, 122);
  --color-icon-disabled: rgb(161, 161, 170);
  --color-icon-muted: rgb(161, 161, 170);
  --color-icon-inverse: rgb(229, 231, 235);
  --color-icon-on-color: rgb(250, 250, 250);
  --color-icon-primary: rgb(89, 77, 246);
  --color-icon-interactive: rgb(37, 99, 235);
  --color-icon-error: rgb(220, 38, 38);
  --color-icon-info: rgb(37, 99, 235);
  --color-icon-success: rgb(4, 120, 87);
  --color-icon-warning: rgb(161, 98, 7);
  --color-icon-magic: rgb(28, 11, 245);

  /* ---- Typography ---- */
  --font-family-sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* ---- Spacing: Radius ---- */
  --radius-sm: calc(var(--radius, 8px) - 4px);
  --radius-md: calc(var(--radius, 8px) - 2px);
  --radius-lg: var(--radius, 8px);
  --radius-xl: calc(var(--radius, 8px) + 4px);
  --radius: 8px;

  /* ---- Shadows ---- */
  --shadow-sm-strong: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px -1px rgba(0, 0, 0, 0.10);
  --shadow-btn-primary: 0 1px 2px #381FA350;
  --shadow-btn-destructive: 0 1px 2px #7D121250;
  --shadow-btn-outline: 0 1px 2px -0.5px #A4ACB980;
  --shadow-btn-outline-dark: 0px 1px 2px 0px #422c5980;

  /* ---- Gradients ---- */
  --gradient-progress-linear: linear-gradient(90deg, #67DEC1 0%, #594DF6 87.85%);

  --gradient-btn-primary-default: linear-gradient(to bottom, #7f65f2 14.64%, #7154f2 87.97%);
  --gradient-btn-primary-highlight: linear-gradient(to bottom, #927BF4, #7B61F2, #7154f2);
  --gradient-btn-primary-hover: linear-gradient(180deg, #866EF2 14.64%, #7154F2 87.97%);
  --gradient-btn-primary-active: linear-gradient(180deg, #7154F2 6.03%, #7F65F2 94.44%);
  --gradient-btn-primary-active-highlight: linear-gradient(to bottom, #927BF4, #7B61F2, #7F65F2);

  --gradient-btn-destructive-default: linear-gradient(180deg, #E14748, #DD2928);
  --gradient-btn-destructive-highlight: linear-gradient(to bottom, #DC2626C0, #DC2626 60%);
  --gradient-btn-destructive-hover: linear-gradient(180deg, #E35352, #DD2928);
  --gradient-btn-destructive-active: linear-gradient(180deg, #DD2928, #E35352);
  --gradient-btn-destructive-active-highlight: linear-gradient(to bottom, #DD2928C0, #E35352 60%);

  --gradient-btn-outline-default: linear-gradient(180deg, #FFFFFF 70%, #fcfcfd);
  --gradient-btn-outline-hover: linear-gradient(180deg, #FFFFFF 40%, #f8f9fa);
  --gradient-btn-outline-active: linear-gradient(0deg, #FFFFFF 40%, #f8f9fa);

  /* ---- Breakpoints ---- */
  /* Bootstrap: xs=0, sm=576px, md=768px, lg=992px, xl=1200px, xxl=1400px */
  /* Harmony: sm=320px, md=580px, lg=940px, xl=1200px */
  /* Harmony Dashboard: sm=471px, md=700px, lg=950px, xl=1200px */

  /* ---- Existing Layout Variables (Backward Compatibility) ---- */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --sidebar-bg: #0f172a;
  --sidebar-text: #94a3b8;
  --sidebar-active-bg: #1e293b;
  --sidebar-active-text: #f8fafc;
  --topbar-height: 58px;
  --topbar-bg: #ffffff;
  --body-bg: #f1f5f9;
  --card-radius: 12px;
  --transition: 0.2s ease;
}

/* ---- Dark Mode Support (class-based) ---- */
[data-theme="dark"] {
  --color-bg-default: rgb(24, 24, 27);
  --color-bg-disabled: rgb(39, 39, 42);
  --color-bg-elevated: rgb(39, 39, 42);
  --color-bg-subtle: rgb(39, 39, 42);
  --color-bg-strong: rgb(63, 63, 70);
  --color-bg-inverse: rgb(255, 255, 255);

  --color-text-default: rgb(243, 244, 246);
  --color-text-muted: rgb(161, 161, 170);
  --color-text-inverse: rgb(2, 0, 29);

  --color-border-default: rgb(63, 63, 70);
  --color-border-hover: rgb(82, 82, 91);

  --color-icon-default: rgb(161, 161, 170);
  --color-icon-inverse: rgb(39, 39, 42);

  --body-bg: #18181b;
  --topbar-bg: #27272a;
}

/* ---- Animation Keyframes ---- */
@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}

@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}

.accordion-down {
  animation: accordion-down 0.2s ease-out;
}

.accordion-up {
  animation: accordion-up 0.2s ease-out;
}