@import 'tailwindcss';
@plugin '@tailwindcss/typography';

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

@import '@radix-ui/colors/gray.css';
@import '@radix-ui/colors/gray-dark.css';
@import '@radix-ui/colors/sand.css';
@import '@radix-ui/colors/sand-dark.css';
@import '@radix-ui/colors/cyan.css';
@import '@radix-ui/colors/cyan-dark.css';
@import '@radix-ui/colors/purple.css';
@import '@radix-ui/colors/purple-dark.css';
@import '@radix-ui/colors/green.css';
@import '@radix-ui/colors/green-dark.css';
@import '@radix-ui/colors/orange.css';
@import '@radix-ui/colors/orange-dark.css';
@import '@radix-ui/colors/red.css';
@import '@radix-ui/colors/red-dark.css';

/**
 * Barazo Design System
 * Radix Colors (structural) + Flexoki accent hues
 * @see decisions/frontend.md
 */

@theme inline {
  /* Typography -- system font stack for body, Source Code Pro for code */
  --font-mono: var(--font-source-code);

  /* Radix Color Tokens - mapped to semantic roles */
  /* Gray scale (neutral) */
  --color-gray-1: var(--gray-1);
  --color-gray-2: var(--gray-2);
  --color-gray-3: var(--gray-3);
  --color-gray-4: var(--gray-4);
  --color-gray-5: var(--gray-5);
  --color-gray-6: var(--gray-6);
  --color-gray-7: var(--gray-7);
  --color-gray-8: var(--gray-8);
  --color-gray-9: var(--gray-9);
  --color-gray-10: var(--gray-10);
  --color-gray-11: var(--gray-11);
  --color-gray-12: var(--gray-12);

  /* Sand scale (warm neutral backgrounds) */
  --color-sand-1: var(--sand-1);
  --color-sand-2: var(--sand-2);
  --color-sand-3: var(--sand-3);
  --color-sand-4: var(--sand-4);
  --color-sand-5: var(--sand-5);
  --color-sand-6: var(--sand-6);
  --color-sand-7: var(--sand-7);
  --color-sand-8: var(--sand-8);
  --color-sand-9: var(--sand-9);
  --color-sand-10: var(--sand-10);
  --color-sand-11: var(--sand-11);
  --color-sand-12: var(--sand-12);

  /* Primary accent - Cyan (Flexoki-inspired) */
  --color-cyan-1: var(--cyan-1);
  --color-cyan-2: var(--cyan-2);
  --color-cyan-3: var(--cyan-3);
  --color-cyan-4: var(--cyan-4);
  --color-cyan-5: var(--cyan-5);
  --color-cyan-6: var(--cyan-6);
  --color-cyan-7: var(--cyan-7);
  --color-cyan-8: var(--cyan-8);
  --color-cyan-9: var(--cyan-9);
  --color-cyan-10: var(--cyan-10);
  --color-cyan-11: var(--cyan-11);
  --color-cyan-12: var(--cyan-12);

  /* Secondary accent - Purple */
  --color-purple-1: var(--purple-1);
  --color-purple-2: var(--purple-2);
  --color-purple-3: var(--purple-3);
  --color-purple-4: var(--purple-4);
  --color-purple-5: var(--purple-5);
  --color-purple-6: var(--purple-6);
  --color-purple-7: var(--purple-7);
  --color-purple-8: var(--purple-8);
  --color-purple-9: var(--purple-9);
  --color-purple-10: var(--purple-10);
  --color-purple-11: var(--purple-11);
  --color-purple-12: var(--purple-12);

  /* Semantic colors - Success (Green) */
  --color-green-1: var(--green-1);
  --color-green-2: var(--green-2);
  --color-green-3: var(--green-3);
  --color-green-4: var(--green-4);
  --color-green-5: var(--green-5);
  --color-green-6: var(--green-6);
  --color-green-7: var(--green-7);
  --color-green-8: var(--green-8);
  --color-green-9: var(--green-9);
  --color-green-10: var(--green-10);
  --color-green-11: var(--green-11);
  --color-green-12: var(--green-12);

  /* Semantic colors - Warning (Orange) */
  --color-orange-1: var(--orange-1);
  --color-orange-2: var(--orange-2);
  --color-orange-3: var(--orange-3);
  --color-orange-4: var(--orange-4);
  --color-orange-5: var(--orange-5);
  --color-orange-6: var(--orange-6);
  --color-orange-7: var(--orange-7);
  --color-orange-8: var(--orange-8);
  --color-orange-9: var(--orange-9);
  --color-orange-10: var(--orange-10);
  --color-orange-11: var(--orange-11);
  --color-orange-12: var(--orange-12);

  /* Semantic colors - Error (Red) */
  --color-red-1: var(--red-1);
  --color-red-2: var(--red-2);
  --color-red-3: var(--red-3);
  --color-red-4: var(--red-4);
  --color-red-5: var(--red-5);
  --color-red-6: var(--red-6);
  --color-red-7: var(--red-7);
  --color-red-8: var(--red-8);
  --color-red-9: var(--red-9);
  --color-red-10: var(--red-10);
  --color-red-11: var(--red-11);
  --color-red-12: var(--red-12);

  /* Semantic mapping */
  --color-background: var(--sand-1);
  --color-foreground: var(--sand-12);
  --color-muted: var(--sand-3);
  --color-muted-foreground: var(--sand-11);
  --color-border: var(--sand-6);
  --color-border-hover: var(--sand-7);
  --color-input: var(--sand-3);
  --color-input-focus: var(--sand-4);
  --color-ring: var(--cyan-8);
  --color-ring-offset: var(--sand-1);

  /* Primary (Cyan) - cyan-9 is bright, needs dark text for AA contrast
     Hardcoded from --sand-12 to avoid CSS var resolution issues in a11y tools */
  --color-primary: var(--cyan-9);
  --color-primary-foreground: #21201c;
  --color-primary-hover: var(--cyan-10);
  --color-primary-active: var(--cyan-11);
  --color-primary-muted: var(--cyan-3);

  /* Secondary (Purple) */
  --color-secondary: var(--purple-9);
  --color-secondary-foreground: #fff;
  --color-secondary-hover: var(--purple-10);
  --color-secondary-active: var(--purple-11);
  --color-secondary-muted: var(--purple-3);

  /* Accent (Cyan for interactive highlights) */
  --color-accent: var(--cyan-4);
  --color-accent-foreground: var(--cyan-12);

  /* Destructive (Red) - uses var() refs so Radix dark mode auto-switches.
     Light: #ce2c31 text (5.21:1 vs white), Dark: #ff9592 text (8.95:1 vs dark bg).
     Foreground uses --red-1 for AA contrast on destructive backgrounds in both modes. */
  --color-destructive: var(--red-11);
  --color-destructive-foreground: var(--red-1);
  --color-destructive-hover: var(--red-12);
  --color-destructive-muted: var(--red-3);

  /* Success (Green) */
  --color-success: var(--green-9);
  --color-success-foreground: var(--sand-12);
  --color-success-hover: var(--green-10);
  --color-success-muted: var(--green-3);

  /* Warning (Orange) */
  --color-warning: var(--orange-9);
  --color-warning-foreground: var(--sand-12);
  --color-warning-hover: var(--orange-10);
  --color-warning-muted: var(--orange-3);

  /* Info (Purple) */
  --color-info: var(--purple-9);
  --color-info-foreground: #fff;
  --color-info-hover: var(--purple-10);
  --color-info-muted: var(--purple-3);

  /* Card/Surface */
  --color-card: var(--sand-2);
  --color-card-foreground: var(--sand-12);
  --color-card-hover: var(--sand-3);
  --color-popover: var(--sand-1);
  --color-popover-foreground: var(--sand-12);

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 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);

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
}

.dark {
  /* Dark mode uses Radix dark color scales */
  --color-background: var(--sand-dark-1);
  --color-foreground: var(--sand-dark-12);
  --color-muted: var(--sand-dark-3);
  --color-muted-foreground: var(--sand-dark-11);
  --color-border: var(--sand-dark-6);
  --color-border-hover: var(--sand-dark-7);
  --color-input: var(--sand-dark-3);
  --color-input-focus: var(--sand-dark-4);
  --color-ring: var(--cyan-dark-8);
  --color-ring-offset: var(--sand-dark-1);

  --color-card: var(--sand-dark-2);
  --color-card-foreground: var(--sand-dark-12);
  --color-card-hover: var(--sand-dark-3);
  --color-popover: var(--sand-dark-1);
  --color-popover-foreground: var(--sand-dark-12);
}

/* Container -- Tailwind v4 no longer includes mx-auto/padding by default */
@utility container {
  margin-inline: auto;
  padding-inline: 1rem;
  max-width: 80rem;
}

/* Restore centering for native <dialog> elements.
   Tailwind's preflight resets margin to 0, which strips the browser's
   default margin:auto that centers modal dialogs opened via showModal(). */
dialog {
  margin: auto;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-feature-settings:
    'rlig' 1,
    'calt' 1;
}

/* Focus visible styles */
:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

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

/* Selection color */
::selection {
  background-color: var(--color-primary-muted);
  color: var(--color-primary);
}

/* Drawer animations for admin mobile sidebar */
@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

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

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

@utility animate-slide-in-left {
  animation: slide-in-left 200ms ease-out;
}

@utility animate-slide-out-left {
  animation: slide-out-left 200ms ease-in;
}

@utility animate-fade-in {
  animation: fade-in 200ms ease-out;
}

@utility animate-fade-out {
  animation: fade-out 200ms ease-in;
}

/* Component classes */
@layer components {
  .prose-barazo a {
    color: var(--cyan-11);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--cyan-11) 40%, transparent);
    text-underline-offset: 2px;
  }
  .prose-barazo a:hover {
    text-decoration-color: var(--cyan-11);
  }
}