/* AdYugo — MAGIX-inspired light console */
:root {
  /* Pastel system */
  --color-lavender: #D8B4FE;
  --color-lavender-deep: #C084FC;
  --color-lavender-muted: rgba(216, 180, 254, 0.35);
  --color-soft-blue: #BAE6FD;
  --color-soft-blue-deep: #7DD3FC;
  --color-soft-blue-muted: rgba(186, 230, 253, 0.45);
  --color-mint: #BBF7D0;
  --color-mint-deep: #86EFAC;
  --color-mint-muted: rgba(187, 247, 208, 0.45);
  --color-peach: #FDBA74;
  --color-peach-muted: rgba(253, 186, 116, 0.4);
  --color-ink: #1A1A1A;
  --color-ink-soft: #333333;

  /* Brand aliases kept for existing class names */
  --color-twilight: #1A1A1A;
  --color-twilight-hover: #333333;
  --color-twilight-muted: rgba(26, 26, 26, 0.06);
  --color-azure: #38BDF8;
  --color-azure-muted: var(--color-soft-blue-muted);
  --color-clementine: #FDBA74;
  --color-clementine-hover: #FB923C;
  --color-clementine-muted: var(--color-peach-muted);
  --color-navy-ink: #1A1A1A;
  --color-navy-deep: #111111;
  --color-navy-lift: #333333;

  --color-accent: var(--color-lavender);
  --color-accent-hover: var(--color-lavender-deep);
  --color-accent-muted: var(--color-lavender-muted);
  --color-data: #0EA5E9;
  --color-data-muted: var(--color-soft-blue-muted);

  --color-primary: #1A1A1A;
  --color-primary-hover: #333333;
  --color-primary-muted: rgba(26, 26, 26, 0.06);
  --color-secondary: var(--color-lavender-deep);
  --color-secondary-muted: var(--color-lavender-muted);

  --color-success: #16A34A;
  --color-success-muted: var(--color-mint-muted);
  --color-warning: #EA580C;
  --color-warning-muted: var(--color-peach-muted);
  --color-danger: #DC2626;
  --color-danger-muted: rgba(220, 38, 38, 0.1);

  /* Surfaces — soft light canvas */
  --color-bg: #F3F4F6;
  --color-bg-subtle: #F3F4F6;
  --color-bg-elevated: #FFFFFF;
  --color-surface-solid: #FFFFFF;
  --color-card: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-border: #E5E7EB;
  --color-border-strong: #D1D5DB;

  --kpi-blue-accent: #38BDF8;
  --kpi-pink-accent: #C084FC;
  --kpi-green-accent: #4ADE80;
  --kpi-orange-accent: #FB923C;
  --kpi-blue: #E0F2FE;
  --kpi-pink: #F3E8FF;
  --kpi-green: #DCFCE7;
  --kpi-orange: #FFEDD5;
  --kpi-blue-tint: #E0F2FE;
  --kpi-pink-tint: #F3E8FF;
  --kpi-green-tint: #DCFCE7;
  --kpi-orange-tint: #FFEDD5;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-md: 0 10px 24px -4px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 20px 40px -8px rgb(0 0 0 / 0.1);
  --shadow-kpi: 0 4px 16px rgba(15, 23, 42, 0.05);

  --color-sidebar: #1A1A1A;
  --color-sidebar-text: rgba(255, 255, 255, 0.72);
  --color-sidebar-text-hover: #FFFFFF;
  --color-sidebar-active-bg: #333333;
  --color-sidebar-active-text: #FFFFFF;

  --color-header: #1A1A1A;
  --color-header-text: #FFFFFF;
  --color-header-muted: rgba(255, 255, 255, 0.65);

  --color-text: #111827;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;
  --color-text-inverse: #FFFFFF;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --container-max: 100%;
  --sidebar-width: 0px;
  --header-height: 72px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --font-display: 'Plus Jakarta Sans', 'DM Sans', 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'DM Sans', 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', Consolas, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --transition-fast: 140ms var(--ease-out);
  --transition-base: 200ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);

  --z-sidebar: 100;
  --z-header: 90;
  --z-overlay: 200;
  --z-cmdk: 350;
  --z-toast: 400;
}

[data-theme="dark"] {
  --color-bg: #111111;
  --color-bg-subtle: #111111;
  --color-bg-elevated: #1A1A1A;
  --color-surface-solid: #1A1A1A;
  --color-card: #1F1F1F;
  --color-surface: #1F1F1F;
  --color-border: #2A2A2A;
  --color-border-strong: #3A3A3A;
  --color-text: #F3F4F6;
  --color-text-secondary: #A1A1AA;
  --color-text-muted: #71717A;
  --color-header: #0A0A0A;
  --kpi-blue: rgba(56, 189, 248, 0.12);
  --kpi-pink: rgba(192, 132, 252, 0.12);
  --kpi-green: rgba(74, 222, 128, 0.12);
  --kpi-orange: rgba(251, 146, 60, 0.12);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] {
  /* light is default :root */
}
