/*
 * shadcn/ui tokens on top of Blume's theme. Blume (Tailwind v4) already maps
 * background/foreground/muted/border onto its --blume-* tokens; this adds the
 * names shadcn components expect, pointed at the same tokens so the progress
 * cards follow the site in both colour schemes. Blume inlines this file into
 * its Tailwind entry and switches dark mode with [data-theme="dark"], not
 * shadcn's .dark class.
 *
 * Deliberately NOT remapped: `accent`. In Blume it is the brand colour
 * (bg-accent), in shadcn a subtle hover surface; the vendored components here
 * never use it.
 */

:root {
  /* Difficulty hues, LeetCode's: easy teal, medium amber, hard red. */
  --chart-1: oklch(0.72 0.12 195);
  --chart-2: oklch(0.8 0.16 80);
  --chart-3: oklch(0.63 0.22 25);
  /* Solved fill for the topic bubbles. */
  --chart-4: oklch(0.72 0.17 150);
  --chart-5: oklch(0.6 0.12 250);
  /* Heatmap ramp — the GREENS of apps/api/src/charts.ts (README + email), with
     level 0 on the theme's muted surface so an empty day reads in light mode. */
  --heat-0: var(--blume-muted);
  --heat-1: #9be9a8;
  --heat-2: #40c463;
  --heat-3: #30a14e;
  --heat-4: #216e39;
}

:root[data-theme="dark"] {
  --chart-1: oklch(0.75 0.12 195);
  --chart-2: oklch(0.83 0.16 80);
  --chart-3: oklch(0.68 0.21 25);
  --chart-4: oklch(0.76 0.17 150);
  --chart-5: oklch(0.7 0.12 250);
  --heat-0: var(--blume-muted);
  --heat-1: #0e4429;
  --heat-2: #006d32;
  --heat-3: #26a641;
  --heat-4: #39d353;
}

/* shadcn components draw `border` with no colour and rely on a global
   `* { border-color: var(--border) }` base rule. Blume has none (its own
   components always name border-border), so give shadcn's parts — every one
   carries data-slot — that default, scoped, without touching Blume's. */
@layer base {
  [data-slot],
  [data-slot] * {
    border-color: var(--blume-border);
  }
}

@theme inline {
  --color-card: var(--blume-background);
  --color-card-foreground: var(--blume-foreground);
  --color-popover: var(--blume-background);
  --color-popover-foreground: var(--blume-foreground);
  --color-primary: var(--blume-foreground);
  --color-primary-foreground: var(--blume-background);
  --color-secondary: var(--blume-muted);
  --color-secondary-foreground: var(--blume-foreground);
  --color-input: var(--blume-border);
  --color-ring: var(--blume-muted-foreground);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
}