@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
@import "tailwindcss";

@plugin "tailwindcss-animate";

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

/*
  CRESync - Clay Minimal Light Theme
  Clean, soft neumorphic design with subtle depth
*/

:root {
  /* Light clay palette */
  --background: #E8EAEF;
  --foreground: #1a1a2e;

  /* Cards - slightly lighter for raised effect */
  --card: #E8EAEF;
  --card-foreground: #1a1a2e;

  /* Primary - clean blue */
  --primary: #4F46E5;
  --primary-foreground: #ffffff;

  /* Secondary */
  --secondary: #E0E3EA;
  --secondary-foreground: #64748b;

  --muted: #D8DBE2;
  --muted-foreground: #64748b;

  /* Accent */
  --accent: #E0E3EA;
  --accent-foreground: #4F46E5;

  --destructive: #ef4444;
  --destructive-foreground: #ffffff;

  /* Borders and inputs */
  --border: #D0D3DA;
  --input: #E0E3EA;
  --ring: #4F46E5;

  /* Popover */
  --popover: #E8EAEF;
  --popover-foreground: #1a1a2e;

  /* Sidebar */
  --sidebar: #E0E3EA;
  --sidebar-foreground: #1a1a2e;
  --sidebar-primary: #4F46E5;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #D8DBE2;
  --sidebar-accent-foreground: #4F46E5;
  --sidebar-border: #D0D3DA;
  --sidebar-ring: #4F46E5;

  /* Chart colors */
  --chart-1: #4F46E5;
  --chart-2: #10b981;
  --chart-3: #f59e0b;
  --chart-4: #ef4444;
  --chart-5: #8b5cf6;

  --radius: 1rem;

  /*
   * Clay Elevation System - 5 levels for visual hierarchy
   * Level 0: Flat (no shadow) - base elements, nested content
   * Level 1: Subtle - section headers, secondary containers
   * Level 2: Standard - main content cards
   * Level 3: Raised - interactive hover states, prominent elements
   * Level 4: Elevated - modals, popovers, floating elements
   */
  --shadow-clay-0: none;
  --shadow-clay-1: 3px 3px 6px #c5c9d1, -3px -3px 6px #ffffff;
  --shadow-clay-2: 6px 6px 12px #bfc3cc, -6px -6px 12px #ffffff;
  --shadow-clay-3: 8px 8px 16px #b8bcc5, -8px -8px 16px #ffffff;
  --shadow-clay-4: 12px 12px 24px #b0b4bd, -12px -12px 24px #ffffff;

  /* Inset shadows for inputs and pressed states */
  --shadow-clay-inset: inset 4px 4px 8px #b8bcc5, inset -4px -4px 8px #ffffff;
  --shadow-clay-pressed: inset 3px 3px 6px #c0c4cc, inset -3px -3px 6px #ffffff;

  /* Legacy aliases for backward compatibility */
  --shadow-clay: var(--shadow-clay-2);
  --shadow-clay-sm: var(--shadow-clay-1);

  /* Spacing System */
  --space-unit: 4px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* Component-specific spacing */
  --sidebar-item-padding-y: 12px;
  --sidebar-item-padding-x: 16px;
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 80px;
  --card-padding: 24px;
  --card-padding-sm: 16px;
  --form-field-gap: 20px;
  --table-row-height: 64px;
  --modal-padding: 24px;
  --button-padding-x: 16px;
  --button-padding-y: 10px;
  --section-margin: 32px;
  --icon-text-gap: 10px;
  --badge-gap: 8px;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-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-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --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);
  --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);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background);
}

::-webkit-scrollbar-thumb {
  background: #c5c8cf;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b0b3ba;
}

/* Selection */
::selection {
  background: rgba(79, 70, 229, 0.2);
  color: #1a1a2e;
}

/*
 * Clay Card Hierarchy
 * - clay-card-flat: No elevation (nested elements, inline containers)
 * - clay-card-subtle: Level 1 (section headers, secondary cards)
 * - clay-card: Level 2 (main content cards - default)
 * - clay-card-prominent: Level 3 (emphasized cards, important content)
 */

/* Level 0 - Flat (no elevation) */
.clay-card-flat {
  background: var(--background);
  border-radius: var(--radius);
  box-shadow: var(--shadow-clay-0);
  padding: 1.5rem;
}

/* Level 1 - Subtle elevation (section headers, secondary) */
.clay-card-subtle {
  background: var(--background);
  border-radius: var(--radius);
  box-shadow: var(--shadow-clay-1);
  padding: 1.5rem;
  transition: box-shadow 0.2s ease;
}

/* Level 2 - Standard elevation (main content cards) */
.clay-card {
  background: var(--background);
  border-radius: var(--radius);
  box-shadow: var(--shadow-clay-2);
  padding: 1.5rem;
  transition: box-shadow 0.2s ease;
}

/* Level 3 - Prominent elevation (emphasized content) */
.clay-card-prominent {
  background: var(--background);
  border-radius: var(--radius);
  box-shadow: var(--shadow-clay-3);
  padding: 1.5rem;
  transition: box-shadow 0.2s ease;
}

/* Interactive cards - subtle lift on hover */
.clay-card-interactive {
  background: var(--background);
  border-radius: var(--radius);
  box-shadow: var(--shadow-clay-2);
  padding: 1.5rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.clay-card-interactive:hover {
  box-shadow: var(--shadow-clay-3);
  transform: translateY(-2px);
}

/* Clay Card Pressed/Inset */
.clay-card-pressed {
  background: var(--background);
  border-radius: var(--radius);
  box-shadow: var(--shadow-clay-inset);
}

/* Clay Button - Level 1 elevation */
.clay-btn {
  background: var(--background);
  border-radius: var(--radius);
  box-shadow: var(--shadow-clay-1);
  font-weight: 600;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.clay-btn:hover {
  box-shadow: var(--shadow-clay-2);
}

.clay-btn:active {
  box-shadow: var(--shadow-clay-pressed);
}

/* Clay Button Primary - Level 2 elevation with gradient */
.clay-btn-primary {
  background: linear-gradient(135deg, #4F46E5 0%, #6366f1 100%);
  color: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-clay-2), inset 0 1px 0 rgba(255,255,255,0.2);
  font-weight: 600;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.clay-btn-primary:hover {
  background: linear-gradient(135deg, #4338ca 0%, #4F46E5 100%);
  box-shadow: var(--shadow-clay-3), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

.clay-btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-clay-1);
}

/* Clay Input - Inset Effect */
.clay-input {
  background: var(--background);
  border-radius: var(--radius);
  box-shadow: var(--shadow-clay-inset);
  border: none;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  color: var(--foreground);
  transition: all 0.2s ease;
  width: 100%;
}

.clay-input::placeholder {
  color: var(--muted-foreground);
}

.clay-input:focus {
  outline: none;
  box-shadow: inset 5px 5px 10px #b0b4bd, inset -5px -5px 10px #ffffff, 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* Clay Input with Icon */
.clay-input-icon {
  padding-left: 2.75rem;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
}

.animate-fade-in-scale {
  animation: fadeInScale 0.4s ease-out forwards;
}

.animate-slide-in-from-left {
  animation: slideInFromLeft 0.3s ease-out forwards;
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 0.4s ease-out forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }

/* Status Colors */
.text-success { color: #10b981; }
.text-warning { color: #f59e0b; }
.text-error { color: #ef4444; }

.bg-success-soft { background: rgba(16, 185, 129, 0.1); }
.bg-warning-soft { background: rgba(245, 158, 11, 0.1); }
.bg-error-soft { background: rgba(239, 68, 68, 0.1); }

/* Badge - Minimal elevation (decorative, not interactive) */
.clay-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--background);
  box-shadow: 2px 2px 4px #c8ccd4, -2px -2px 4px #ffffff;
}

.clay-badge-primary {
  background: rgba(79, 70, 229, 0.1);
  color: #4F46E5;
}

.clay-badge-success {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

/* Divider */
.clay-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #d0d3da, transparent);
  border-radius: 1px;
}

/* Avatar */
.clay-avatar {
  border-radius: 50%;
  box-shadow: var(--shadow-clay-sm);
  background: linear-gradient(135deg, #4F46E5 0%, #6366f1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

/* Icon Button - Level 1 elevation */
.clay-icon-btn {
  background: var(--background);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-clay-1);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--muted-foreground);
}

.clay-icon-btn:hover {
  color: var(--primary);
  box-shadow: var(--shadow-clay-2);
}

.clay-icon-btn:active {
  box-shadow: var(--shadow-clay-pressed);
}

/* Progress Bar */
.clay-progress {
  background: var(--background);
  border-radius: 9999px;
  box-shadow: var(--shadow-clay-inset);
  height: 8px;
  overflow: hidden;
}

.clay-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4F46E5, #6366f1);
  border-radius: 9999px;
  transition: width 0.5s ease;
}

/* Nav Link */
.clay-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  color: var(--muted-foreground);
  font-weight: 500;
  transition: all 0.2s ease;
}

.clay-nav-link:hover {
  color: var(--foreground);
  background: rgba(255, 255, 255, 0.5);
}

.clay-nav-link.active {
  color: var(--primary);
  background: var(--background);
  box-shadow: var(--shadow-clay-1);
}

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

/* Base layer for shadcn */
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Override shadcn button */
.bg-primary {
  background: linear-gradient(135deg, #4F46E5 0%, #6366f1 100%) !important;
}

.text-primary {
  color: #4F46E5 !important;
}

.border-primary {
  border-color: #4F46E5 !important;
}