:root {
  --white: #ffffff;
  --black: #000000;

  /* Primary */
  --primary: #7c3aed;

  /* Secondary */
  --secondary: #3d3649;

  /* Gray scale — generada y normalizada desde grayBase */
  --gray: #60576f;
  --gray-100: #c7c2d0;
  --gray-200: #ada6b9;
  --gray-300: #9389a3;
  --gray-400: #796d8c;
  --gray-500: #60576f;
  --gray-600: #474152;
  --gray-700: #2f2a36;
  --gray-800: #161419;
  --gray-900: #000000;

  /* Status */
  --danger: #f87171;
  --success: #22c55e;

  /* Layout */
  --radius: 0.5rem;

  /* Superficies — derivadas de mode + gray scale */
  --background: #000000;
  --foreground: #c7c2d0;
  --card: #161419;
  --card-foreground: #c7c2d0;
  --popover: #161419;
  --popover-foreground: #c7c2d0;

  /* Semánticos */
  --primary-foreground: #ffffff;
  --secondary-foreground: #ffffff;
  --muted: #2f2a36;
  --muted-foreground: #9389a3;
  --accent: #7c3aed40;
  --accent-foreground: #c7c2d0;
  --destructive: #f87171;
  --border: #60576f;
  --input: #7c3aed66;
  --ring: #7c3aed4d;

  /* Charts — derivados del primary */
  --chart-1: #6415ea;
  --chart-2: #c7b11f;
  --chart-3: #309221;
  --chart-4: #f05bb9;
  --chart-5: #32e6ce;

  /* Sidebar */
  --sidebar: #161419;
  --sidebar-foreground: #c7c2d0;
  --sidebar-primary: #7c3aed;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #ba97f6;
  --sidebar-accent-foreground: #4b10b1;
  --sidebar-border: #60576f;
  --sidebar-ring: #7c3aed4d;
}