:root {
  --background: oklch(1.0000 0 0);
  --foreground: oklch(0.2697 0 0);
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.2697 0 0);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.2697 0 0);
  --primary: oklch(0.5296 0.1863 258.1459);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.9686 0.0035 247.8590);
  --secondary-foreground: oklch(0.2697 0 0);
  --muted: oklch(0.9696 0 0);
  --muted-foreground: oklch(0.5547 0 0);
  --accent: oklch(0.9633 0.0154 255.0359);
  --accent-foreground: oklch(0.4430 0.1522 257.9241);
  --destructive: oklch(0.5409 0.2143 28.4788);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.8610 0 0);
  --input: oklch(0.9234 0 0);
  --ring: oklch(0.5296 0.1863 258.1459);
  --chart-1: oklch(0.5296 0.1863 258.1459);
  --chart-2: oklch(0.6902 0.1481 162.3676);
  --chart-3: oklch(0.6683 0.1657 54.1917);
  --chart-4: oklch(0.5815 0.2477 311.2650);
  --chart-5: oklch(0.6057 0.2357 11.9397);
  --sidebar: oklch(0.9848 0 0);
  --sidebar-foreground: oklch(0.3705 0 0);
  --sidebar-primary: oklch(0.5296 0.1863 258.1459);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.9498 0.0109 255.0143);
  --sidebar-accent-foreground: oklch(0.4430 0.1522 257.9241);
  --sidebar-border: oklch(0.9234 0 0);
  --sidebar-ring: oklch(0.5296 0.1863 258.1459);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --radius: 0.125rem;
  --tracking-normal: 0.0125em;
}

.dark {
  --background: oklch(0.2376 0 0);
  --foreground: oklch(0.9389 0 0);
  --card: oklch(0.2697 0 0);
  --card-foreground: oklch(0.9389 0 0);
  --popover: oklch(0.2697 0 0);
  --popover-foreground: oklch(0.9389 0 0);
  --primary: oklch(0.7782 0.1158 252.5545);
  --primary-foreground: oklch(0.2074 0.0625 252.2461);
  --secondary: oklch(0.3211 0 0);
  --secondary-foreground: oklch(0.9389 0 0);
  --muted: oklch(0.3008 0 0);
  --muted-foreground: oklch(0.7244 0 0);
  --accent: oklch(0.3148 0.1071 255.8956);
  --accent-foreground: oklch(0.8647 0.0685 252.0087);
  --destructive: oklch(0.5789 0.2217 27.8067);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.3705 0 0);
  --input: oklch(0.3705 0 0);
  --ring: oklch(0.7782 0.1158 252.5545);
  --chart-1: oklch(0.7782 0.1158 252.5545);
  --chart-2: oklch(0.7750 0.1362 166.9055);
  --chart-3: oklch(0.8380 0.1371 82.1273);
  --chart-4: oklch(0.6863 0.1603 305.6668);
  --chart-5: oklch(0.6856 0.1898 352.1927);
  --sidebar: oklch(0.2156 0 0);
  --sidebar-foreground: oklch(0.8845 0 0);
  --sidebar-primary: oklch(0.7782 0.1158 252.5545);
  --sidebar-primary-foreground: oklch(0.2074 0.0625 252.2461);
  --sidebar-accent: oklch(0.3211 0 0);
  --sidebar-accent-foreground: oklch(0.9619 0 0);
  --sidebar-border: oklch(0.3411 0 0);
  --sidebar-ring: oklch(0.7782 0.1158 252.5545);
  --radius: 0.125rem;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-normal);
}

/* Sidebar collapsed state applied before Alpine hydrates.
 *
 * layouts/partials/head.php sets data-sidebar on <html> from localStorage before
 * first paint. This rule is more specific than Tailwind's `lg:w-64`, so the
 * sidebar already has its final width when the page is first rendered and the
 * layout never jumps once Alpine takes over. Alpine keeps the attribute in sync
 * when the user toggles it. */
@media (min-width: 1024px) {
  html[data-sidebar="closed"] .app-sidebar {
    width: 0;
  }
}

/* Even line lengths on headings, fewer orphans in prose. */
h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Honour the OS "reduce motion" preference for every transition and animation,
 * including utility classes used ad hoc in views. Individual components may
 * still provide their own, more specific reduced-motion alternative. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* shadcn helper utilities */
.bg-background { background-color: var(--background); }
.text-foreground { color: var(--foreground); }

.bg-card { background-color: var(--card); }
.text-card-foreground { color: var(--card-foreground); }

.bg-popover { background-color: var(--popover); }
.text-popover-foreground { color: var(--popover-foreground); }

.bg-primary { background-color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }

.bg-secondary { background-color: var(--secondary); }
.text-secondary-foreground { color: var(--secondary-foreground); }

.bg-muted { background-color: var(--muted); }
.text-muted-foreground { color: var(--muted-foreground); }

.bg-accent { background-color: var(--accent); }
.text-accent-foreground { color: var(--accent-foreground); }

.bg-destructive { background-color: var(--destructive); }
.text-destructive-foreground { color: var(--destructive-foreground); }
.text-destructive { color: var(--destructive); }

.border-border { border-color: var(--border); }
.border-border\/50 { border-color: color-mix(in oklch, var(--border) 50%, transparent); }
.border-input { border-color: var(--input); }
.border-destructive { border-color: var(--destructive) !important; }
.ring-destructive { --tw-ring-color: var(--destructive) !important; }
.focus\:ring-destructive:focus { --tw-ring-color: var(--destructive) !important; }
.focus\:border-destructive:focus { border-color: var(--destructive) !important; }

.bg-sidebar { background-color: var(--sidebar); }
.text-sidebar-foreground { color: var(--sidebar-foreground); }
.border-sidebar-border { border-color: var(--sidebar-border); }
.bg-sidebar-accent { background-color: var(--sidebar-accent); }
.text-sidebar-accent-foreground { color: var(--sidebar-accent-foreground); }

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: var(--ring);
}

/* Opacity-modified theme-token utilities.
 * Tailwind CDN cannot apply an alpha modifier to var() color values
 * (no <alpha-value> placeholder), so these are defined here with
 * color-mix(). They resolve correctly in both light and dark themes. */
.selection\:bg-primary\/20::selection { background-color: color-mix(in oklch, var(--primary) 20%, transparent); }

.bg-primary\/5 { background-color: color-mix(in oklch, var(--primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in oklch, var(--primary) 10%, transparent); }
.bg-primary\/20 { background-color: color-mix(in oklch, var(--primary) 20%, transparent); }
.border-primary\/20 { border-color: color-mix(in oklch, var(--primary) 20%, transparent); }
.border-primary\/30 { border-color: color-mix(in oklch, var(--primary) 30%, transparent); }
.border-primary\/40 { border-color: color-mix(in oklch, var(--primary) 40%, transparent); }
.border-primary\/50 { border-color: color-mix(in oklch, var(--primary) 50%, transparent); }

.bg-destructive\/10 { background-color: color-mix(in oklch, var(--destructive) 10%, transparent); }
.border-destructive\/20 { border-color: color-mix(in oklch, var(--destructive) 20%, transparent); }
.border-destructive\/30 { border-color: color-mix(in oklch, var(--destructive) 30%, transparent); }
.border-destructive\/40 { border-color: color-mix(in oklch, var(--destructive) 40%, transparent); }
.border-destructive\/50 { border-color: color-mix(in oklch, var(--destructive) 50%, transparent); }

.bg-secondary\/80 { background-color: color-mix(in oklch, var(--secondary) 80%, transparent); }

/* Additional alpha steps the views rely on. Tailwind cannot apply an alpha
 * modifier to a bare var(), so every /NN variant has to be declared here or the
 * class silently renders nothing. tools/audit-rendered-pages.php fails the build
 * if a rendered class has no rule in either stylesheet. */
.bg-card\/60 { background-color: color-mix(in oklch, var(--card) 60%, transparent); }
.bg-card\/95 { background-color: color-mix(in oklch, var(--card) 95%, transparent); }
.bg-destructive\/5 { background-color: color-mix(in oklch, var(--destructive) 5%, transparent); }
.bg-destructive\/15 { background-color: color-mix(in oklch, var(--destructive) 15%, transparent); }
.hover\:bg-primary\/20:hover { background-color: color-mix(in oklch, var(--primary) 20%, transparent); }

/* Playground status badges sit on the primary header, so their alpha steps are
 * resolved against --primary-foreground rather than --primary. */
.bg-primary-foreground\/15 { background-color: color-mix(in oklch, var(--primary-foreground) 15%, transparent); }
.border-primary-foreground\/30 { border-color: color-mix(in oklch, var(--primary-foreground) 30%, transparent); }
.hover\:border-border\/80:hover { border-color: color-mix(in oklch, var(--border) 80%, transparent); }
.hover\:bg-muted\/20:hover { background-color: color-mix(in oklch, var(--muted) 20%, transparent); }

.border-border\/60 { border-color: color-mix(in oklch, var(--border) 60%, transparent); }
.border-border\/70 { border-color: color-mix(in oklch, var(--border) 70%, transparent); }

.bg-muted\/10 { background-color: color-mix(in oklch, var(--muted) 10%, transparent); }
.bg-muted\/20 { background-color: color-mix(in oklch, var(--muted) 20%, transparent); }
.bg-muted\/30 { background-color: color-mix(in oklch, var(--muted) 30%, transparent); }
.bg-muted\/40 { background-color: color-mix(in oklch, var(--muted) 40%, transparent); }
.bg-muted\/50 { background-color: color-mix(in oklch, var(--muted) 50%, transparent); }
.bg-muted\/60 { background-color: color-mix(in oklch, var(--muted) 60%, transparent); }
.bg-muted\/70 { background-color: color-mix(in oklch, var(--muted) 70%, transparent); }
.bg-muted\/80 { background-color: color-mix(in oklch, var(--muted) 80%, transparent); }

.text-foreground\/90 { color: color-mix(in oklch, var(--foreground) 90%, transparent); }
.text-muted-foreground\/40 { color: color-mix(in oklch, var(--muted-foreground) 40%, transparent); }
.text-muted-foreground\/50 { color: color-mix(in oklch, var(--muted-foreground) 50%, transparent); }
.text-muted-foreground\/60 { color: color-mix(in oklch, var(--muted-foreground) 60%, transparent); }
.text-muted-foreground\/70 { color: color-mix(in oklch, var(--muted-foreground) 70%, transparent); }
.text-muted-foreground\/75 { color: color-mix(in oklch, var(--muted-foreground) 75%, transparent); }

.hover\:bg-destructive\/10:hover { background-color: color-mix(in oklch, var(--destructive) 10%, transparent); }
.hover\:bg-destructive\/20:hover { background-color: color-mix(in oklch, var(--destructive) 20%, transparent); }
.hover\:border-destructive\/40:hover { border-color: color-mix(in oklch, var(--destructive) 40%, transparent); }
.hover\:bg-muted\/30:hover { background-color: color-mix(in oklch, var(--muted) 30%, transparent); }
.hover\:bg-muted\/50:hover { background-color: color-mix(in oklch, var(--muted) 50%, transparent); }
.hover\:bg-muted\/80:hover { background-color: color-mix(in oklch, var(--muted) 80%, transparent); }
.hover\:bg-secondary\/80:hover { background-color: color-mix(in oklch, var(--secondary) 80%, transparent); }
.hover\:border-primary\/40:hover { border-color: color-mix(in oklch, var(--primary) 40%, transparent); }
.hover\:border-ring\/60:hover { border-color: color-mix(in oklch, var(--ring) 60%, transparent); }

/* Custom subtle scrollbar matching shadcn */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted-foreground);
}
/* Valinc Brand Logo Theme Adaptation */
.valinc-brand-logo {
  filter: brightness(0);
  transition: filter 0.15s ease;
}

.dark .valinc-brand-logo {
  filter: brightness(0) invert(1);
}