/*
 * Wondel.ai Custom Styles
 * Inspired by Sierra.ai's clean, professional B2B aesthetic
 * 
 * Brand Identity:
 * - Modern tech product studio
 * - Clean, sophisticated, minimal
 * - Teal/emerald accent (Sierra-inspired)
 * 
 * Font: Plus Jakarta Sans (Google Fonts)
 */

/* Import Plus Jakarta Sans - modern, geometric sans-serif */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ==================== TYPOGRAPHY ==================== */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  
  /* ==================== LIGHT MODE COLORS ==================== */
  
  /* Background - Clean white like Sierra */
  --background: oklch(99% 0 0);
  --foreground: oklch(15% 0 0);
  
  /* Cards - Subtle warm gray tint */
  --card: oklch(98.5% 0.002 80);
  --card-foreground: oklch(15% 0 0);
  
  /* Popover */
  --popover: oklch(99% 0 0);
  --popover-foreground: oklch(15% 0 0);
  
  /* Primary - Teal/Emerald accent (Sierra-inspired) */
  --primary: oklch(45% 0.12 170);
  --primary-foreground: oklch(99% 0 0);
  
  /* Secondary - Warm beige like Sierra sections */
  --secondary: oklch(94% 0.01 80);
  --secondary-foreground: oklch(25% 0.01 80);
  
  /* Muted - Subtle gray */
  --muted: oklch(96% 0.005 80);
  --muted-foreground: oklch(45% 0 0);
  
  /* Accent - Light teal tint */
  --accent: oklch(95% 0.02 170);
  --accent-foreground: oklch(30% 0.08 170);
  
  /* Destructive */
  --destructive: oklch(55% 0.2 25);
  --destructive-foreground: oklch(99% 0 0);
  
  /* Border/Input - Very subtle */
  --border: oklch(92% 0 0);
  --input: oklch(96% 0 0);
  
  /* Ring/Focus - Teal accent */
  --ring: oklch(45% 0.12 170);
  
  /* Chart colors - Harmonious palette */
  --chart-1: oklch(45% 0.12 170);
  --chart-2: oklch(55% 0.15 200);
  --chart-3: oklch(65% 0.10 140);
  --chart-4: oklch(50% 0.08 250);
  --chart-5: oklch(60% 0.12 300);
  
  /* Sidebar */
  --sidebar: oklch(98% 0.002 80);
  --sidebar-foreground: oklch(15% 0 0);
  --sidebar-primary: oklch(45% 0.12 170);
  --sidebar-primary-foreground: oklch(99% 0 0);
  --sidebar-accent: oklch(95% 0.01 80);
  --sidebar-accent-foreground: oklch(15% 0 0);
  --sidebar-border: oklch(92% 0 0);
  --sidebar-ring: oklch(45% 0.12 170);
  
  /* ==================== DESIGN TOKENS ==================== */
  --radius: 0.75rem;
  
  /* Refined shadows - softer, more natural */
  --shadow-2xs: 0 1px 2px -1px oklch(0% 0 0 / 0.05);
  --shadow-xs: 0 1px 3px -1px oklch(0% 0 0 / 0.06);
  --shadow-sm: 0 2px 4px -1px oklch(0% 0 0 / 0.06), 0 1px 2px -1px oklch(0% 0 0 / 0.04);
  --shadow: 0 4px 6px -2px oklch(0% 0 0 / 0.05), 0 2px 4px -2px oklch(0% 0 0 / 0.04);
  --shadow-md: 0 6px 10px -3px oklch(0% 0 0 / 0.06), 0 3px 6px -2px oklch(0% 0 0 / 0.04);
  --shadow-lg: 0 12px 20px -4px oklch(0% 0 0 / 0.08), 0 4px 8px -2px oklch(0% 0 0 / 0.04);
  --shadow-xl: 0 20px 30px -6px oklch(0% 0 0 / 0.10), 0 8px 12px -4px oklch(0% 0 0 / 0.05);
  --shadow-2xl: 0 32px 48px -8px oklch(0% 0 0 / 0.15);
  
  /* Wondel Brand Colors */
  --wondel-teal: oklch(45% 0.12 170);
  --wondel-teal-light: oklch(92% 0.03 170);
  --wondel-warm: oklch(94% 0.015 80);
}

.dark {
  /* ==================== DARK MODE COLORS ==================== */
  
  /* Background - Rich dark (not pure black) */
  --background: oklch(12% 0.005 260);
  --foreground: oklch(95% 0 0);
  
  /* Cards - Slightly elevated dark */
  --card: oklch(16% 0.008 260);
  --card-foreground: oklch(95% 0 0);
  
  /* Popover */
  --popover: oklch(14% 0.006 260);
  --popover-foreground: oklch(95% 0 0);
  
  /* Primary - Brighter teal for dark mode visibility */
  --primary: oklch(70% 0.14 170);
  --primary-foreground: oklch(12% 0 0);
  
  /* Secondary - Dark muted surface */
  --secondary: oklch(20% 0.01 260);
  --secondary-foreground: oklch(90% 0 0);
  
  /* Muted */
  --muted: oklch(22% 0.008 260);
  --muted-foreground: oklch(65% 0 0);
  
  /* Accent - Teal tint for dark */
  --accent: oklch(25% 0.03 170);
  --accent-foreground: oklch(90% 0.02 170);
  
  /* Destructive */
  --destructive: oklch(55% 0.2 25);
  --destructive-foreground: oklch(95% 0 0);
  
  /* Border/Input */
  --border: oklch(25% 0.01 260);
  --input: oklch(20% 0.008 260);
  
  /* Ring/Focus */
  --ring: oklch(70% 0.14 170);
  
  /* Chart colors - Adjusted for dark mode */
  --chart-1: oklch(70% 0.14 170);
  --chart-2: oklch(65% 0.15 200);
  --chart-3: oklch(75% 0.10 140);
  --chart-4: oklch(60% 0.10 250);
  --chart-5: oklch(70% 0.12 300);
  
  /* Sidebar */
  --sidebar: oklch(14% 0.006 260);
  --sidebar-foreground: oklch(95% 0 0);
  --sidebar-primary: oklch(70% 0.14 170);
  --sidebar-primary-foreground: oklch(12% 0 0);
  --sidebar-accent: oklch(20% 0.01 260);
  --sidebar-accent-foreground: oklch(95% 0 0);
  --sidebar-border: oklch(25% 0.01 260);
  --sidebar-ring: oklch(70% 0.14 170);
  
  /* Dark mode shadows - subtle glow effect */
  --shadow-2xs: 0 1px 2px -1px oklch(0% 0 0 / 0.3);
  --shadow-xs: 0 1px 3px -1px oklch(0% 0 0 / 0.35);
  --shadow-sm: 0 2px 4px -1px oklch(0% 0 0 / 0.35), 0 1px 2px -1px oklch(0% 0 0 / 0.25);
  --shadow: 0 4px 6px -2px oklch(0% 0 0 / 0.30), 0 2px 4px -2px oklch(0% 0 0 / 0.20);
  --shadow-md: 0 6px 10px -3px oklch(0% 0 0 / 0.35), 0 3px 6px -2px oklch(0% 0 0 / 0.25);
  --shadow-lg: 0 12px 20px -4px oklch(0% 0 0 / 0.40), 0 4px 8px -2px oklch(0% 0 0 / 0.25);
  --shadow-xl: 0 20px 30px -6px oklch(0% 0 0 / 0.50), 0 8px 12px -4px oklch(0% 0 0 / 0.30);
  --shadow-2xl: 0 32px 48px -8px oklch(0% 0 0 / 0.60);
  
  /* Wondel Brand Colors - Dark mode */
  --wondel-teal: oklch(70% 0.14 170);
  --wondel-teal-light: oklch(25% 0.04 170);
  --wondel-warm: oklch(20% 0.01 80);
}

/* ==================== GLOBAL STYLES ==================== */

body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss02", "cv01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==================== WONDEL-SPECIFIC ENHANCEMENTS ==================== */

/* Smooth section transitions */
section {
  transition: background-color 0.3s ease;
}

/* Refined button hover states */
button, a[role="button"], [class*="Button"] {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card hover enhancement */
[class*="Card"]:hover {
  transform: translateY(-2px);
}

/* Navigation - no additional glass effect (component handles scroll state) */

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

/* Selection color matching brand */
::selection {
  background: oklch(45% 0.12 170 / 0.25);
}

.dark ::selection {
  background: oklch(70% 0.14 170 / 0.35);
}

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

/* Alternating section backgrounds like Sierra */
section:nth-of-type(even) {
  background-color: var(--secondary);
}

.dark section:nth-of-type(even) {
  background-color: oklch(14% 0.006 260);
}