/* shadcn neutral palette - zinc base. OKLCH values match shadcn defaults. */
@layer base {
  :root {
    color-scheme: light;

    --background: oklch(1 0 0);
    --foreground: oklch(0.141 0.004 285.82);

    --card: oklch(0.975 0.002 286.38);
    --card-foreground: oklch(0.141 0.004 285.82);

    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.141 0.004 285.82);

    --primary: oklch(0.21 0.006 285.88);
    --primary-foreground: oklch(0.985 0 0);

    --secondary: oklch(0.967 0.001 286.38);
    --secondary-foreground: oklch(0.21 0.006 285.88);

    --muted: oklch(0.967 0.001 286.38);
    --muted-foreground: oklch(0.552 0.016 285.94);

    --accent: oklch(0.967 0.001 286.38);
    --accent-foreground: oklch(0.21 0.006 285.88);

    --destructive: oklch(0.577 0.245 27.33);
    --destructive-foreground: oklch(1 0 0);

    --warning: oklch(0.769 0.188 70.08);
    --warning-foreground: oklch(0.15 0 0);

    --success: oklch(0.596 0.145 163.225);
    --success-foreground: oklch(0.985 0 0);
    /* Lightened success tint: the bright end of success gradients (e.g. the
       lesson topic-complete banner). Replaces ad-hoc color-mix(success, white). */
    --success-lighten: oklch(0.82 0.1 163.225);

    --info: oklch(0.546 0.245 262.88);
    --info-foreground: oklch(0.985 0 0);

    --border: oklch(0.92 0.004 286.32);
    --input: oklch(0.92 0.004 286.32);
    --ring: oklch(0.552 0.016 285.94);

    /* Categorical chart ramp: teal-anchored on the brand palette (chart-1 is
       brand teal, chart-2 brand orange), then evenly spaced hues so all 8 stay
       distinguishable together (used by the US region map and comparison charts).
       The .dark block lifts each lightness for legibility on the dark surface. */
    --chart-1: oklch(0.62 0.11 205);
    --chart-2: oklch(0.7 0.16 55);
    --chart-3: oklch(0.55 0.17 258);
    --chart-4: oklch(0.68 0.15 150);
    --chart-5: oklch(0.56 0.18 300);
    --chart-6: oklch(0.62 0.19 20);
    --chart-7: oklch(0.77 0.14 88);
    --chart-8: oklch(0.6 0.19 335);

    --sidebar: oklch(0.975 0.002 286.38);
    --sidebar-foreground: oklch(0.141 0.004 285.82);
    --sidebar-primary: oklch(0.21 0.006 285.88);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.95 0.003 286.38);
    --sidebar-accent-foreground: oklch(0.21 0.006 285.88);
    --sidebar-border: oklch(0.92 0.004 286.32);
    --sidebar-ring: oklch(0.552 0.016 285.94);

    --radius: 0.5rem;
  }

  .dark {
    color-scheme: dark;

    --background: oklch(0.141 0.004 285.82);
    --foreground: oklch(0.985 0 0);

    --card: oklch(0.205 0.006 286.03);
    --card-foreground: oklch(0.985 0 0);

    --popover: oklch(0.205 0.006 286.03);
    --popover-foreground: oklch(0.985 0 0);

    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.21 0.006 285.88);

    --secondary: oklch(0.274 0.006 286.03);
    --secondary-foreground: oklch(0.985 0 0);

    --muted: oklch(0.274 0.006 286.03);
    --muted-foreground: oklch(0.705 0.015 286.07);

    --accent: oklch(0.274 0.006 286.03);
    --accent-foreground: oklch(0.985 0 0);

    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.985 0 0);

    --warning: oklch(0.828 0.189 84.429);
    --warning-foreground: oklch(0.15 0 0);

    --success: oklch(0.696 0.17 162.48);
    --success-foreground: oklch(0.985 0 0);
    --success-lighten: oklch(0.82 0.13 162.48);

    --info: oklch(0.623 0.214 259.82);
    --info-foreground: oklch(0.15 0 0);

    --border: oklch(0.274 0.006 286.03);
    --input: oklch(0.274 0.006 286.03);
    --ring: oklch(0.552 0.016 285.94);

    --chart-1: oklch(0.72 0.11 205);
    --chart-2: oklch(0.77 0.15 58);
    --chart-3: oklch(0.7 0.15 258);
    --chart-4: oklch(0.76 0.15 150);
    --chart-5: oklch(0.71 0.17 300);
    --chart-6: oklch(0.7 0.17 20);
    --chart-7: oklch(0.83 0.14 88);
    --chart-8: oklch(0.72 0.17 335);

    --sidebar: oklch(0.175 0.005 285.82);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.985 0 0);
    --sidebar-primary-foreground: oklch(0.21 0.006 285.88);
    --sidebar-accent: oklch(0.245 0.006 286.03);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(0.245 0.006 286.03);
    --sidebar-ring: oklch(0.552 0.016 285.94);
  }

  body {
    background: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
}

/* Saved-items sidebar geometry. Blueprint's BbSidebar reads these custom
   properties from its pre-built CSS, so tuning them here makes the sidebar
   wider and roomier without touching component markup or inline styles.
   Kept outside @layer base so the values win unconditionally. */
:root {
  --sidebar-width: 19rem;
  --sidebar-width-mobile: 19rem;

  --sidebar-content-px: 0.75rem;
  --sidebar-content-gap: 0.75rem;
  --sidebar-group-py: 0.5rem;
  --sidebar-group-px: 0.5rem;

  --sidebar-menu-gap: 0.25rem;
  --sidebar-menu-button-py: 0.5rem;
  --sidebar-menu-button-px: 0.75rem;
  --sidebar-menu-button-gap: 0.75rem;
  --sidebar-menu-button-font-size: 0.9375rem;
  --sidebar-menu-button-line-height: 1.5rem;
  --sidebar-menu-button-icon-size: 1.125rem;
}