/**
 * shadcn-rails Base Styles
 *
 * This file contains the base CSS variables, animations, and utility styles
 * required for shadcn-rails components to work properly.
 *
 * Import this file in your application's stylesheet:
 *   @import "shadcn/base";
 *
 * Or with Tailwind CSS:
 *   @import "shadcn/base.css";
 */

/* ============================================
   CSS Custom Properties (Theme Variables)
   ============================================ */

/* Field (light): bone ground, ink text, signal-coral accent */
:root {
  /* Backgrounds from Field palette */
  --background: 40 28% 95%;         /* #F6F4EF bg-body (bone) */
  --foreground: 40 6% 10%;          /* #1A1917 text-primary (ink) */

  --card: 40 33% 98%;               /* #FDFCF9 bg-surface (module) */
  --card-foreground: 40 6% 10%;     /* #1A1917 ink */

  --popover: 40 33% 98%;            /* #FDFCF9 bg-surface (module) */
  --popover-foreground: 40 6% 10%;  /* #1A1917 ink */

  /* Accent: signal coral #E8461F */
  --primary: 12 82% 52%;            /* #E8461F accent (coral) */
  --primary-foreground: 0 0% 100%;

  --secondary: 43 22% 93%;          /* #F1EFE8 surface-hover */
  --secondary-foreground: 43 6% 35%; /* #5F5C52 text-secondary */

  --muted: 43 22% 93%;              /* #F1EFE8 surface-hover */
  --muted-foreground: 43 6% 51%;    /* #8A877C text-muted */

  --accent: 43 22% 93%;             /* #F1EFE8 surface-hover */
  --accent-foreground: 40 6% 10%;   /* #1A1917 ink */

  --destructive: 10 63% 47%;        /* #C2452D danger */
  --destructive-foreground: 0 0% 100%;

  --border: 45 20% 87%;             /* #E6E3D9 rule (hairline) */
  --input: 45 20% 87%;              /* #E6E3D9 rule (hairline) */
  --ring: 12 82% 52%;               /* #E8461F accent (coral) */

  /* Border Radius - from DESIGN_SYSTEM.md */
  --radius: 0.375rem;               /* 6px radius (default) */

  /* Chart Colors - Field palette */
  --chart-1: 12 82% 52%;            /* #E8461F coral (default series) */
  --chart-2: 149 80% 30%;           /* #0F8A4E success/green */
  --chart-3: 38 71% 42%;            /* #B7791F warning/amber */
  --chart-4: 10 63% 47%;            /* #C2452D danger/red */
  --chart-5: 13 83% 43%;            /* #C93A12 accent (deep coral) */

  /* Sidebar - Field palette */
  --sidebar-background: 40 33% 98%; /* #FDFCF9 bg-surface (module) */
  --sidebar-foreground: 43 6% 35%;  /* #5F5C52 text-secondary */
  --sidebar-primary: 12 82% 52%;    /* #E8461F accent (coral) */
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 42 22% 90%;     /* #EBE8DF bg-active */
  --sidebar-accent-foreground: 40 6% 10%;
  --sidebar-border: 45 20% 87%;     /* #E6E3D9 rule (hairline) */
  --sidebar-ring: 12 82% 52%;
}

/* Light mode override (secondary, rarely used) */
.light {
  --background: 0 0% 100%;
  --foreground: 223 24% 6%;

  --card: 0 0% 98%;
  --card-foreground: 223 24% 6%;

  --popover: 0 0% 100%;
  --popover-foreground: 223 24% 6%;

  --primary: 239 84% 67%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 14% 96%;
  --secondary-foreground: 223 17% 8%;

  --muted: 220 14% 96%;
  --muted-foreground: 218 5% 44%;

  --accent: 220 14% 96%;
  --accent-foreground: 223 17% 8%;

  --destructive: 0 91% 71%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 239 84% 67%;

  --chart-1: 239 84% 67%;
  --chart-2: 158 64% 52%;
  --chart-3: 43 96% 56%;
  --chart-4: 0 91% 71%;
  --chart-5: 235 90% 74%;

  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 223 17% 8%;
  --sidebar-primary: 239 84% 67%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 14% 96%;
  --sidebar-accent-foreground: 223 17% 8%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 239 84% 67%;
}

/* ============================================
   Base Styles
   ============================================ */

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* ============================================
   Animations
   ============================================ */

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

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

@keyframes collapsible-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-collapsible-content-height, auto);
  }
}

@keyframes collapsible-up {
  from {
    height: var(--radix-collapsible-content-height, auto);
  }
  to {
    height: 0;
  }
}

@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

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

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

@keyframes zoom-in {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}

@keyframes zoom-out {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.95);
  }
}

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

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

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

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

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

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

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

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

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Tooltip animations - subtle pop effect */
@keyframes tooltip-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(2px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes tooltip-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.96) translateY(2px);
  }
}

/* ============================================
   Animation Utility Classes
   ============================================ */

.animate-accordion-down {
  animation: accordion-down 0.2s ease-out;
}

.animate-accordion-up {
  animation: accordion-up 0.2s ease-out;
}

.animate-collapsible-down {
  animation: collapsible-down 0.2s ease-out;
}

.animate-collapsible-up {
  animation: collapsible-up 0.2s ease-out;
}

.animate-progress-indeterminate {
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}

.animate-in {
  animation-duration: 150ms;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.animate-out {
  animation-duration: 150ms;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
}

.fade-in-0 {
  animation-name: fade-in;
}

.fade-out-0 {
  animation-name: fade-out;
}

.zoom-in-95 {
  animation-name: zoom-in;
}

.zoom-out-95 {
  animation-name: zoom-out;
}

.slide-in-from-top-2 {
  animation-name: slide-in-from-top;
}

.slide-in-from-bottom-2 {
  animation-name: slide-in-from-bottom;
}

.slide-in-from-left-2 {
  animation-name: slide-in-from-left;
}

.slide-in-from-right-2 {
  animation-name: slide-in-from-right;
}

.slide-out-to-top {
  animation-name: slide-out-to-top;
}

.slide-out-to-bottom {
  animation-name: slide-out-to-bottom;
}

.slide-out-to-left {
  animation-name: slide-out-to-left;
}

.slide-out-to-right {
  animation-name: slide-out-to-right;
}

/* Tooltip animation classes */
.animate-tooltip-in {
  animation: tooltip-in 150ms ease-out both;
}

.animate-tooltip-out {
  animation: tooltip-out 100ms ease-in both;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================
   Portal Styles
   ============================================ */

.shadcn-dialog-portal,
.shadcn-sheet-portal {
  position: fixed;
  inset: 0;
  z-index: 50;
}

/* ============================================
   Focus Visible Styles
   ============================================ */

.focus-visible\:outline-none:focus-visible {
  outline: none;
}

.focus-visible\:ring-1:focus-visible {
  box-shadow: 0 0 0 1px hsl(var(--ring));
}

.focus-visible\:ring-2:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--ring));
}

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

.focus-visible\:ring-offset-2:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

/* ============================================
   Scrollbar Styles
   ============================================ */

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}