@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/*
 * Eleva Speed — shadcn dark (new-york) neutral palette
 * Brand pink (#FD105E) kept on primary, ring, chart-1, sidebar accents.
 */

:root {
  /* Force dark — no light mode for MVP */
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  /* Eleva Speed brand — vivid magenta/rose */
  --primary: rgb(253, 16, 94);
  --primary-foreground: #ffffff;
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: rgb(253, 16, 94);
  --radius: 0.625rem;

  /* Performance semantic colors */
  --perf-good: #4edea3;
  --perf-warning: #b9c8de;
  --perf-danger: oklch(0.704 0.191 22.216);

  /* Neutral surface scale (formerly Stitch navy) */
  --surface: oklch(0.145 0 0);
  --surface-container-low: oklch(0.18 0 0);
  --surface-container: oklch(0.205 0 0);
  --surface-container-high: oklch(0.235 0 0);
  --surface-container-highest: oklch(0.269 0 0);

  /* Charts */
  --chart-1: rgb(253, 16, 94);
  --chart-2: #4edea3;
  --chart-3: #b9c8de;
  --chart-4: oklch(0.704 0.191 22.216);
  --chart-5: #6ffbbe;

  /* Sidebar */
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: rgb(253, 16, 94);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(253, 16, 94, 0.12);
  --sidebar-accent-foreground: rgb(253, 16, 94);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: rgb(253, 16, 94);
}

/* Dark class mirrors root — app is dark-only */
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: rgb(253, 16, 94);
  --primary-foreground: #ffffff;
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: rgb(253, 16, 94);
  --chart-1: rgb(253, 16, 94);
  --chart-2: #4edea3;
  --chart-3: #b9c8de;
  --chart-4: oklch(0.704 0.191 22.216);
  --chart-5: #6ffbbe;
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: rgb(253, 16, 94);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(253, 16, 94, 0.12);
  --sidebar-accent-foreground: rgb(253, 16, 94);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: rgb(253, 16, 94);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --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);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* Performance colors */
  --color-perf-good: var(--perf-good);
  --color-perf-warning: var(--perf-warning);
  --color-perf-danger: var(--perf-danger);

  /* Surface scale */
  --color-surface: var(--surface);
  --color-surface-container-low: var(--surface-container-low);
  --color-surface-container: var(--surface-container);
  --color-surface-container-high: var(--surface-container-high);
  --color-surface-container-highest: var(--surface-container-highest);

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

@layer base {
  * {
    @apply border-border;
  }

  /*
   * Global app background — shadcn dark style:
   *  - layer 1: subtle rose radial glow at top-center (brand identity)
   *  - layer 2: dot-matrix grid pattern (very low opacity)
   *  - base color: --background (darkest neutral; cards use --card which
   *    is one step lighter and elevates naturally above this surface)
   * Applied on <body> so every route (auth, marketing, dashboard) shares it.
   */
  body {
    @apply text-foreground;
    background-color: var(--background);
    background-image:
      radial-gradient(ellipse 80% 50% at 50% -10%, rgb(253 16 94 / 0.18), transparent 60%),
      radial-gradient(circle, oklch(0.985 0 0 / 0.06) 1px, transparent 1px);
    background-size:
      100% 100%,
      24px 24px;
    background-repeat: no-repeat, repeat;
    background-attachment: fixed, fixed;
  }

  @media (max-width: 640px) {
    body {
      background-size:
        100% 100%,
        16px 16px;
    }
  }
}

/*
 * Legacy alias — still applied on SidebarInset which forces its own
 * bg-background. Keeping the class transparentises the inset so the
 * body backdrop shows through.
 */
.dashboard-bg {
  background: transparent !important;
}

/* Glass panel utility */
@utility glass-panel {
  backdrop-filter: blur(16px);
  background: oklch(0.205 0 0 / 0.8);
}

@utility no-visible-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }
}