@import "tailwindcss";

/* Dark mode is class-based (mirrors legacy darkMode: ["class"]). */
@custom-variant dark (&:where(.dark, .dark *));

/*
 * Design tokens ported from the legacy React/Tailwind/shadcn app
 * (lovable/src/index.css + lovable/tailwind.config.ts).
 *
 * HSL channel values are copied faithfully. The `@theme inline` block below maps
 * Tailwind utility colors (bg-background, text-foreground, bg-primary, border-border,
 * rounded-lg, ...) to these CSS variables so they resolve to the SAME values as the
 * legacy app.
 */
:root {
  --background: 240 20% 97%;
  --foreground: 235 25% 18%;

  --card: 0 0% 100%;
  --card-foreground: 235 25% 18%;

  --popover: 0 0% 100%;
  --popover-foreground: 235 25% 18%;

  --primary: 231 85% 51%;
  --primary-foreground: 0 0% 100%;

  --secondary: 240 20% 94%;
  --secondary-foreground: 235 25% 18%;

  --muted: 240 15% 92%;
  --muted-foreground: 235 10% 46%;

  --accent: 231 75% 58%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --border: 240 15% 88%;
  --input: 240 15% 88%;
  --ring: 231 85% 51%;

  --radius: 0.75rem;

  --hlin-purple: 231 85% 51%;
  --hlin-navy: 235 35% 22%;
  --hlin-light: 240 20% 97%;
  --success: 142 72% 40%;
  --warning: 38 92% 50%;
  --info: 210 80% 52%;

  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
  --background: 235 35% 12%;
  --foreground: 240 20% 95%;

  --card: 235 30% 16%;
  --card-foreground: 240 20% 95%;

  --popover: 235 30% 16%;
  --popover-foreground: 240 20% 95%;

  --primary: 231 80% 58%;
  --primary-foreground: 0 0% 100%;

  --secondary: 235 25% 22%;
  --secondary-foreground: 240 20% 95%;

  --muted: 235 25% 22%;
  --muted-foreground: 240 10% 60%;

  --accent: 231 75% 62%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 100%;

  --border: 235 25% 22%;
  --input: 235 25% 22%;
  --ring: 231 80% 58%;

  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

/*
 * Map the ported CSS variables onto Tailwind's theme. `inline` means the generated
 * utilities reference var(--background) etc. directly, so .dark overrides flow through
 * without regenerating utilities. Mirrors lovable/tailwind.config.ts `theme.extend`.
 */
@theme inline {
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --color-hlin-purple: hsl(var(--hlin-purple));
  --color-hlin-navy: hsl(var(--hlin-navy));
  --color-hlin-light: hsl(var(--hlin-light));

  --color-success: hsl(var(--success));
  --color-warning: hsl(var(--warning));
  --color-info: hsl(var(--info));

  --color-sidebar: hsl(var(--sidebar-background));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-ring: hsl(var(--sidebar-ring));

  /* borderRadius from legacy config (lg = --radius, md = -2px, sm = -4px) */
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* Match the live site exactly: the system sans stack (Tailwind default), NOT Inter. */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Legacy base layer: every element gets the border token; body uses bg/fg + system font. */
@layer base {
  * {
    border-color: hsl(var(--border));
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}