/*
 * Lumeo — Base Theme Variables
 *
 * Default theme: Zinc — matches the Lumeo logo's monochrome identity.
 * Override CSS custom properties or use data-theme="blue|green|rose|orange" for alternate palettes.
 *
 * Usage with Tailwind CSS v4:
 *   @import "./_content/Lumeo/css/lumeo.css" layer(base);
 *
 * Usage without Tailwind:
 *   <link href="_content/Lumeo/css/lumeo.css" rel="stylesheet" />
 */

:root {
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(240 10% 3.9%);

  --color-card: hsl(0 0% 100%);
  --color-card-foreground: hsl(240 10% 3.9%);

  --color-popover: hsl(0 0% 100%);
  --color-popover-foreground: hsl(240 10% 3.9%);

  --color-primary: hsl(240 5.9% 10%);
  --color-primary-foreground: hsl(0 0% 98%);

  --color-secondary: hsl(240 4.8% 95.9%);
  --color-secondary-foreground: hsl(240 5.9% 10%);

  --color-muted: hsl(240 4.8% 95.9%);
  --color-muted-foreground: hsl(240 3.8% 46.1%);

  --color-accent: hsl(240 4.8% 95.9%);
  --color-accent-foreground: hsl(240 5.9% 10%);

  --color-destructive: hsl(0 84% 60%);
  --color-destructive-foreground: hsl(0 0% 100%);
  --color-destructive-light: hsl(0 70% 95%);
  --color-destructive-text: hsl(0 70% 35%);

  --color-success: hsl(152 60% 42%);
  --color-success-foreground: hsl(0 0% 100%);
  --color-success-light: hsl(152 50% 95%);

  --color-warning: hsl(38 92% 50%);
  --color-warning-foreground: hsl(240 10% 3.9%);
  --color-warning-light: hsl(38 80% 95%);

  --color-info: hsl(210 80% 55%);
  --color-info-foreground: hsl(0 0% 100%);
  --color-info-light: hsl(210 60% 95%);
  --color-info-text: hsl(210 80% 35%);

  --color-success-text: hsl(152 60% 30%);
  --color-warning-text: hsl(38 70% 35%);

  --color-chart-1: hsl(240 5.9% 10%);
  --color-chart-2: hsl(173 58% 39%);
  --color-chart-3: hsl(197 37% 24%);
  --color-chart-4: hsl(43 74% 66%);
  --color-chart-5: hsl(27 87% 67%);

  --color-sidebar: hsl(0 0% 100%);
  --color-sidebar-foreground: hsl(240 10% 3.9%);
  --color-sidebar-primary: hsl(240 5.9% 10%);
  --color-sidebar-primary-foreground: hsl(0 0% 98%);
  --color-sidebar-accent: hsl(240 4.8% 95.9%);
  --color-sidebar-accent-foreground: hsl(240 5.9% 10%);
  --color-sidebar-border: hsl(240 5.9% 90%);
  --color-sidebar-ring: hsl(240 5.9% 10%);

  --color-border: hsl(240 5.9% 90%);
  --color-input: hsl(240 5.9% 90%);
  --color-ring: hsl(240 5.9% 10%);

  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 2px);
  --radius-xl: calc(var(--radius) + 6px);
}

.dark {
  --color-background: hsl(240 10% 3.9%);
  --color-foreground: hsl(0 0% 98%);

  --color-card: hsl(240 10% 3.9%);
  --color-card-foreground: hsl(0 0% 98%);

  --color-popover: hsl(240 10% 3.9%);
  --color-popover-foreground: hsl(0 0% 98%);

  --color-primary: hsl(0 0% 98%);
  --color-primary-foreground: hsl(240 5.9% 10%);

  --color-secondary: hsl(240 3.7% 15.9%);
  --color-secondary-foreground: hsl(0 0% 98%);

  --color-muted: hsl(240 3.7% 15.9%);
  --color-muted-foreground: hsl(240 5% 64.9%);

  --color-accent: hsl(240 3.7% 15.9%);
  --color-accent-foreground: hsl(0 0% 98%);

  --color-destructive: hsl(0 84% 60%);
  --color-destructive-foreground: hsl(0 0% 100%);
  --color-destructive-light: hsl(0 50% 15%);
  --color-destructive-text: hsl(0 80% 70%);

  --color-success: hsl(152 60% 35%);
  --color-success-foreground: hsl(0 0% 100%);
  --color-success-light: hsl(152 30% 15%);

  --color-warning: hsl(38 80% 45%);
  --color-warning-foreground: hsl(0 0% 98%);
  --color-warning-light: hsl(38 50% 15%);

  --color-info: hsl(210 80% 50%);
  --color-info-foreground: hsl(0 0% 100%);
  --color-info-light: hsl(210 40% 15%);
  --color-info-text: hsl(210 80% 70%);

  --color-success-text: hsl(152 60% 60%);
  --color-warning-text: hsl(38 80% 65%);

  --color-chart-1: hsl(0 0% 85%);
  --color-chart-2: hsl(173 58% 45%);
  --color-chart-3: hsl(197 50% 50%);
  --color-chart-4: hsl(43 74% 66%);
  --color-chart-5: hsl(27 87% 67%);

  --color-sidebar: hsl(240 10% 3.9%);
  --color-sidebar-foreground: hsl(0 0% 98%);
  --color-sidebar-primary: hsl(0 0% 98%);
  --color-sidebar-primary-foreground: hsl(240 5.9% 10%);
  --color-sidebar-accent: hsl(240 3.7% 15.9%);
  --color-sidebar-accent-foreground: hsl(0 0% 98%);
  --color-sidebar-border: hsl(240 3.7% 15.9%);
  --color-sidebar-ring: hsl(0 0% 98%);

  --color-border: hsl(240 3.7% 15.9%);
  --color-input: hsl(240 3.7% 15.9%);
  --color-ring: hsl(240 4.9% 83.9%);
}

/* =====================================================
 * Base Color Variations
 * These adjust neutral/gray tones for muted, border, input, secondary, and card backgrounds.
 * The "slate" base is the default (no attribute needed).
 * ===================================================== */

[data-base-color="gray"] {
  --color-background: hsl(0 0% 99%);
  --color-foreground: hsl(224 71% 4%);
  --color-card: hsl(0 0% 100%);
  --color-card-foreground: hsl(224 71% 4%);
  --color-popover: hsl(0 0% 100%);
  --color-popover-foreground: hsl(224 71% 4%);
  --color-muted: hsl(220 14% 96%);
  --color-muted-foreground: hsl(220 9% 46%);
  --color-border: hsl(220 13% 91%);
  --color-input: hsl(220 13% 91%);
  --color-secondary: hsl(220 14% 96%);
  --color-secondary-foreground: hsl(220 9% 12%);
  --color-accent: hsl(220 14% 96%);
  --color-accent-foreground: hsl(220 9% 12%);
  --color-sidebar: hsl(0 0% 100%);
  --color-sidebar-foreground: hsl(224 71% 4%);
  --color-sidebar-border: hsl(220 13% 91%);
}

[data-base-color="gray"].dark,
.dark[data-base-color="gray"] {
  --color-background: hsl(224 71% 4%);
  --color-foreground: hsl(210 20% 98%);
  --color-card: hsl(220 18% 8%);
  --color-card-foreground: hsl(210 20% 98%);
  --color-popover: hsl(220 18% 8%);
  --color-popover-foreground: hsl(210 20% 98%);
  --color-muted: hsl(215 20% 16%);
  --color-muted-foreground: hsl(215 14% 58%);
  --color-border: hsl(215 18% 20%);
  --color-input: hsl(215 18% 20%);
  --color-secondary: hsl(215 20% 16%);
  --color-secondary-foreground: hsl(210 40% 96%);
  --color-accent: hsl(215 20% 16%);
  --color-accent-foreground: hsl(210 40% 96%);
  --color-sidebar: hsl(220 18% 8%);
  --color-sidebar-foreground: hsl(210 20% 98%);
  --color-sidebar-border: hsl(215 18% 20%);
}

[data-base-color="zinc"] {
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(240 10% 4%);
  --color-card: hsl(0 0% 100%);
  --color-card-foreground: hsl(240 10% 4%);
  --color-popover: hsl(0 0% 100%);
  --color-popover-foreground: hsl(240 10% 4%);
  --color-muted: hsl(240 5% 96%);
  --color-muted-foreground: hsl(240 4% 46%);
  --color-border: hsl(240 6% 90%);
  --color-input: hsl(240 6% 90%);
  --color-secondary: hsl(240 5% 96%);
  --color-secondary-foreground: hsl(240 6% 10%);
  --color-accent: hsl(240 5% 96%);
  --color-accent-foreground: hsl(240 6% 10%);
  --color-sidebar: hsl(0 0% 100%);
  --color-sidebar-foreground: hsl(240 10% 4%);
  --color-sidebar-border: hsl(240 6% 90%);
}

[data-base-color="zinc"].dark,
.dark[data-base-color="zinc"] {
  --color-background: hsl(240 10% 4%);
  --color-foreground: hsl(0 0% 98%);
  --color-card: hsl(240 6% 8%);
  --color-card-foreground: hsl(0 0% 98%);
  --color-popover: hsl(240 6% 8%);
  --color-popover-foreground: hsl(0 0% 98%);
  --color-muted: hsl(240 4% 16%);
  --color-muted-foreground: hsl(240 5% 58%);
  --color-border: hsl(240 4% 20%);
  --color-input: hsl(240 4% 20%);
  --color-secondary: hsl(240 4% 16%);
  --color-secondary-foreground: hsl(0 0% 98%);
  --color-accent: hsl(240 4% 16%);
  --color-accent-foreground: hsl(0 0% 98%);
  --color-sidebar: hsl(240 6% 8%);
  --color-sidebar-foreground: hsl(0 0% 98%);
  --color-sidebar-border: hsl(240 4% 20%);
}

[data-base-color="neutral"] {
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(0 0% 4%);
  --color-card: hsl(0 0% 100%);
  --color-card-foreground: hsl(0 0% 4%);
  --color-popover: hsl(0 0% 100%);
  --color-popover-foreground: hsl(0 0% 4%);
  --color-muted: hsl(0 0% 96%);
  --color-muted-foreground: hsl(0 0% 45%);
  --color-border: hsl(0 0% 90%);
  --color-input: hsl(0 0% 90%);
  --color-secondary: hsl(0 0% 96%);
  --color-secondary-foreground: hsl(0 0% 9%);
  --color-accent: hsl(0 0% 96%);
  --color-accent-foreground: hsl(0 0% 9%);
  --color-sidebar: hsl(0 0% 100%);
  --color-sidebar-foreground: hsl(0 0% 4%);
  --color-sidebar-border: hsl(0 0% 90%);
}

[data-base-color="neutral"].dark,
.dark[data-base-color="neutral"] {
  --color-background: hsl(0 0% 4%);
  --color-foreground: hsl(0 0% 98%);
  --color-card: hsl(0 0% 7%);
  --color-card-foreground: hsl(0 0% 98%);
  --color-popover: hsl(0 0% 7%);
  --color-popover-foreground: hsl(0 0% 98%);
  --color-muted: hsl(0 0% 15%);
  --color-muted-foreground: hsl(0 0% 58%);
  --color-border: hsl(0 0% 18%);
  --color-input: hsl(0 0% 18%);
  --color-secondary: hsl(0 0% 15%);
  --color-secondary-foreground: hsl(0 0% 98%);
  --color-accent: hsl(0 0% 15%);
  --color-accent-foreground: hsl(0 0% 98%);
  --color-sidebar: hsl(0 0% 7%);
  --color-sidebar-foreground: hsl(0 0% 98%);
  --color-sidebar-border: hsl(0 0% 18%);
}

[data-base-color="stone"] {
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(20 14% 4%);
  --color-card: hsl(0 0% 100%);
  --color-card-foreground: hsl(20 14% 4%);
  --color-popover: hsl(0 0% 100%);
  --color-popover-foreground: hsl(20 14% 4%);
  --color-muted: hsl(25 8% 96%);
  --color-muted-foreground: hsl(25 5% 45%);
  --color-border: hsl(25 8% 90%);
  --color-input: hsl(25 8% 90%);
  --color-secondary: hsl(25 8% 96%);
  --color-secondary-foreground: hsl(20 10% 9%);
  --color-accent: hsl(25 8% 96%);
  --color-accent-foreground: hsl(20 10% 9%);
  --color-sidebar: hsl(0 0% 100%);
  --color-sidebar-foreground: hsl(20 14% 4%);
  --color-sidebar-border: hsl(25 8% 90%);
}

[data-base-color="stone"].dark,
.dark[data-base-color="stone"] {
  --color-background: hsl(20 14% 4%);
  --color-foreground: hsl(30 10% 96%);
  --color-card: hsl(24 10% 7%);
  --color-card-foreground: hsl(30 10% 96%);
  --color-popover: hsl(24 10% 7%);
  --color-popover-foreground: hsl(30 10% 96%);
  --color-muted: hsl(20 8% 15%);
  --color-muted-foreground: hsl(25 5% 58%);
  --color-border: hsl(20 8% 18%);
  --color-input: hsl(20 8% 18%);
  --color-secondary: hsl(20 8% 15%);
  --color-secondary-foreground: hsl(30 10% 96%);
  --color-accent: hsl(20 8% 15%);
  --color-accent-foreground: hsl(30 10% 96%);
  --color-sidebar: hsl(24 10% 7%);
  --color-sidebar-foreground: hsl(30 10% 96%);
  --color-sidebar-border: hsl(20 8% 18%);
}

/* =====================================================
 * Style: New York
 * Compact style with tighter radius
 * ===================================================== */

.style-new-york {
  --radius: 0.5rem;
}

/* =====================================================
 * Menu Accent Variations
 * ===================================================== */

[data-menu-accent="bold"] {
  --color-sidebar-accent: var(--color-primary);
  --color-sidebar-accent-foreground: var(--color-primary-foreground);
}

[data-menu-accent="outline"] {
  --color-sidebar-accent: transparent;
  --color-sidebar-accent-foreground: var(--color-sidebar-foreground);
}

/* Custom Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 9999px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-muted-foreground);
}

/* Slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}