/**
 * BarefootJS Design System - CSS Variables
 *
 * Based on shadcn/ui v4 color system (neutral theme).
 * Uses OKLCH values for CSS custom properties.
 */

:root {
  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* Radius */
  --radius: 0.625rem;

  /* Background/Foreground - neutral theme (OKLCH) */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);

  /* Card */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);

  /* Popover */
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);

  /* Primary */
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);

  /* Secondary */
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);

  /* Muted */
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);

  /* Accent */
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);

  /* Destructive */
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);

  /* Success */
  --success: oklch(0.527 0.154 150.069);
  --success-foreground: oklch(0.985 0 0);

  /* Warning */
  --warning: oklch(0.769 0.188 70.08);
  --warning-foreground: oklch(0.145 0 0);

  /* Info */
  --info: oklch(0.623 0.214 259.815);
  --info-foreground: oklch(0.985 0 0);

  /* Border/Input/Ring */
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);

  /* Shadow Scale (Tailwind compatible) */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* Animation Durations */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;

  /* Animation Easings */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

.dark {
  /* Background/Foreground - neutral theme (OKLCH) */
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);

  /* Card */
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);

  /* Popover */
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);

  /* Primary - Slightly lighter than card for contrast, with white text */
  --primary: oklch(0.35 0 0);
  --primary-foreground: oklch(0.985 0 0);

  /* Secondary */
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);

  /* Muted */
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);

  /* Accent */
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);

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

  /* Success */
  --success: oklch(0.696 0.17 162.48);
  --success-foreground: oklch(0.145 0 0);

  /* Warning */
  --warning: oklch(0.769 0.188 70.08);
  --warning-foreground: oklch(0.145 0 0);

  /* Info */
  --info: oklch(0.623 0.214 259.815);
  --info-foreground: oklch(0.985 0 0);

  /* Border/Input/Ring */
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
}

/* Theme transition - applied temporarily during theme switch */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              fill var(--duration-fast) var(--ease-default),
              stroke var(--duration-fast) var(--ease-default) !important;
}

/* Reduced motion support */
@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;
  }
}

/* Base styles */
* {
  box-sizing: border-box;
  border-color: var(--border);
}

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

/* Reset button browser defaults */
button {
  border-width: 0;
  border-style: solid;
  background-color: transparent;
}

/* Monospace code elements */
code, kbd, samp, pre {
  font-family: var(--font-mono);
}

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* Shiki syntax highlighting - dual theme support */
/* Light mode: use --shiki-light color */
:root span[style*="--shiki-light"] {
  color: var(--shiki-light);
}

/* Dark mode: use --shiki-dark color */
.dark span[style*="--shiki-dark"] {
  color: var(--shiki-dark);
}

/* Dialog z-index - higher than fixed header (z-50) */
.z-dialog {
  z-index: 9999;
}

/* Tooltip visibility - controlled by data attribute */
[data-tooltip-content] {
  display: none;
}
[data-tooltip-content][data-tooltip-open="true"] {
  display: block;
}

/* Toast visibility - controlled by animation state */
[data-toast][data-toast-animation-state="hidden"] {
  display: none !important;
}
[data-toast][data-toast-animation-state="entering"],
[data-toast][data-toast-animation-state="visible"],
[data-toast][data-toast-animation-state="exiting"] {
  display: flex !important;
}

/* Ensure hidden attribute works with flexbox items */
[hidden] {
  display: none !important;
}