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

/*
 * Dumber Browser - Unified Theme CSS
 * Following shadcn-svelte conventions
 *
 * Aesthetic: Industrial Terminal / Brutalist Minimal
 * - Sharp corners (--radius: 0)
 * - High contrast
 * - Vibrant green primary accent
 *
 * Theme Flow:
 * 1. TOML config defines appearance.light_palette / dark_palette
 * 2. Go ThemeManager converts to CSS variables via palette.ToWebCSSVars()
 * 3. ContentInjector injects <style data-dumber-theme-vars> into webviews
 * 4. These CSS values below serve as fallbacks when running outside the browser
 */

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

/* ═══════════════════════════════════════════════════════════════
 * LIGHT THEME (fallback values - Go backend overrides at runtime)
 * ═══════════════════════════════════════════════════════════════ */
:root {
  --radius: 0;

  /* Core surfaces */
  --background: oklch(0.985 0.002 260);
  --foreground: oklch(0.145 0.02 260);

  /* Card/Panel surfaces */
  --card: oklch(0.965 0.004 260);
  --card-foreground: oklch(0.145 0.02 260);

  /* Popover/Dropdown */
  --popover: oklch(0.985 0.002 260);
  --popover-foreground: oklch(0.145 0.02 260);

  /* Primary - Vibrant Green */
  --primary: oklch(0.55 0.20 145);
  --primary-foreground: oklch(0.985 0 0);

  /* Secondary - Muted surfaces */
  --secondary: oklch(0.94 0.008 260);
  --secondary-foreground: oklch(0.20 0.02 260);

  /* Muted - Subdued content */
  --muted: oklch(0.94 0.008 260);
  --muted-foreground: oklch(0.48 0.02 260);

  /* Accent - Cyan for info/highlights */
  --accent: oklch(0.58 0.14 200);
  --accent-foreground: oklch(0.145 0.02 260);

  /* Destructive - Red for danger */
  --destructive: oklch(0.55 0.22 25);
  --destructive-foreground: oklch(0.985 0 0);

  /* Borders & Inputs - solid colors for WebKitGTK compatibility */
  --border: oklch(0.88 0.008 260);
  --input: oklch(0.88 0.008 260);
  --ring: var(--primary);

  /* Semantic colors - for status indicators */
  --success: oklch(0.65 0.20 145);
  --success-foreground: oklch(0.985 0 0);
  --warning: oklch(0.75 0.18 85);
  --warning-foreground: oklch(0.145 0.02 260);
  --info: oklch(0.65 0.15 230);
  --info-foreground: oklch(0.985 0 0);

  /* Chart colors */
  --chart-1: oklch(0.58 0.18 145);
  --chart-2: oklch(0.56 0.14 200);
  --chart-3: oklch(0.66 0.15 70);
  --chart-4: oklch(0.58 0.18 300);
  --chart-5: oklch(0.60 0.18 25);

  /* Sidebar */
  --sidebar: oklch(0.975 0.002 260);
  --sidebar-foreground: oklch(0.145 0.02 260);
  --sidebar-primary: oklch(0.55 0.20 145);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.94 0.008 260);
  --sidebar-accent-foreground: oklch(0.20 0.02 260);
  --sidebar-border: oklch(0.88 0.008 260);
  --sidebar-ring: oklch(0.55 0.20 145);
}

/* ═══════════════════════════════════════════════════════════════
 * DARK THEME (fallback values - Go backend overrides at runtime)
 * ═══════════════════════════════════════════════════════════════ */
.dark {
  /* Core surfaces - true black for maximum contrast */
  --background: oklch(0.09 0.005 260);
  --foreground: oklch(0.97 0 0);

  /* Card/Panel surfaces - slightly elevated */
  --card: oklch(0.14 0.008 260);
  --card-foreground: oklch(0.97 0 0);

  /* Popover/Dropdown */
  --popover: oklch(0.16 0.008 260);
  --popover-foreground: oklch(0.97 0 0);

  /* Primary - Bright Green */
  --primary: oklch(0.75 0.19 145);
  --primary-foreground: oklch(0.12 0.02 145);

  /* Secondary - Elevated surfaces */
  --secondary: oklch(0.20 0.008 260);
  --secondary-foreground: oklch(0.97 0 0);

  /* Muted - More visible subdued content */
  --muted: oklch(0.22 0.008 260);
  --muted-foreground: oklch(0.70 0.01 260);

  /* Accent - Cyan for info/highlights */
  --accent: oklch(0.68 0.14 200);
  --accent-foreground: oklch(0.97 0 0);

  /* Destructive - Red for danger */
  --destructive: oklch(0.65 0.20 25);
  --destructive-foreground: oklch(0.97 0 0);

  /* Borders & Inputs - solid colors for WebKitGTK compatibility */
  --border: oklch(0.35 0.01 260);
  --input: oklch(0.35 0.01 260);
  --ring: var(--primary);

  /* Semantic colors - brighter for dark bg */
  --success: oklch(0.72 0.18 145);
  --success-foreground: oklch(0.12 0.02 145);
  --warning: oklch(0.80 0.16 85);
  --warning-foreground: oklch(0.12 0.02 85);
  --info: oklch(0.70 0.14 230);
  --info-foreground: oklch(0.12 0.02 230);

  /* Chart colors - brighter for dark bg */
  --chart-1: oklch(0.72 0.18 145);
  --chart-2: oklch(0.68 0.14 200);
  --chart-3: oklch(0.76 0.16 70);
  --chart-4: oklch(0.66 0.18 300);
  --chart-5: oklch(0.68 0.18 25);

  /* Sidebar */
  --sidebar: oklch(0.12 0.008 260);
  --sidebar-foreground: oklch(0.97 0 0);
  --sidebar-primary: oklch(0.75 0.19 145);
  --sidebar-primary-foreground: oklch(0.12 0.02 145);
  --sidebar-accent: oklch(0.20 0.008 260);
  --sidebar-accent-foreground: oklch(0.97 0 0);
  --sidebar-border: oklch(0.35 0.01 260);
  --sidebar-ring: oklch(0.75 0.19 145);
}

/* ═══════════════════════════════════════════════════════════════
 * TAILWIND THEME BRIDGE
 * Maps design tokens to Tailwind's color system
 * ═══════════════════════════════════════════════════════════════ */
@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --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-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-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);
  --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);
}

/* ═══════════════════════════════════════════════════════════════
 * BASE LAYER
 * Default styles applied to all elements
 * ═══════════════════════════════════════════════════════════════ */
@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    transition:
      background-color 200ms ease,
      color 200ms ease;
  }
}

/* ═══════════════════════════════════════════════════════════════
 * BROWSER UI BASE
 * ═══════════════════════════════════════════════════════════════ */

.browser-ui {
  background-color: var(--background);
  color: var(--foreground);
  border-color: var(--border);
  transition: colors 250ms;
}

/* ═══════════════════════════════════════════════════════════════
 * ANIMATIONS
 * ═══════════════════════════════════════════════════════════════ */

.slide-in-top {
  animation: slide-in-top 0.25s ease-out;
}

.slide-out-top {
  animation: slide-out-top 0.25s ease-in;
}

.fade-in {
  animation: fade-in 0.15s ease-out;
}

.fade-out {
  animation: fade-out 0.15s ease-in;
}

@keyframes slide-in-top {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-out-top {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
 * FIND HIGHLIGHTING
 * Styles for in-page search highlights
 * ═══════════════════════════════════════════════════════════════ */

.find-highlight {
  background-color: rgb(255 235 59); /* yellow-400 */
  color: rgb(0 0 0); /* black */
  padding: 0 0.125rem; /* px-0.5 */
  border-radius: 0.125rem; /* rounded-sm */
  box-shadow: 0 0 0 1px rgb(200 185 0) inset;
}

.find-active {
  background-color: rgb(255 152 0) !important; /* orange-500 */
  color: rgb(0 0 0); /* black */
  box-shadow: 0 0 0 1px rgb(179 107 0) inset !important;
}

/* ═══════════════════════════════════════════════════════════════
 * COMPONENT ISOLATION
 * For injecting browser UI into external pages
 * ═══════════════════════════════════════════════════════════════ */

.browser-component-root {
  /* Reset any inherited styles from the website */
  all: initial;
  /* Apply our design system */
  font-family:
    Fira Sans,
    system-ui,
    -apple-system,
    sans-serif;
  box-sizing: border-box;
  * {
    box-sizing: border-box;
  }
}