/**
 * Base styles for cortex-react-components
 * 
 * This file contains only CSS custom properties (design tokens) and base styles.
 * It does NOT include Tailwind utilities - those are generated by the consuming application.
 * 
 * Usage in consuming app:
 * 1. Import this CSS file: import 'cortex-react-components/styles.css';
 * 2. Extend your tailwind.config.js with our preset (see package exports)
 * 3. Load the Manrope font (e.g., via Google Fonts or self-hosted)
 * 
 * To load Manrope font, add to your HTML head:
 * <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
 * 
 * Or in Next.js, use next/font:
 * import { Manrope } from 'next/font/google';
 * const manrope = Manrope({ subsets: ['latin'] });
 */

/* CSS Custom Properties (Design Tokens) */
:root {
  --background: 20 14.3% 4.1%;
  --foreground: 0 0% 95%;
  --card: 24 9.8% 10%;
  --card-foreground: 0 0% 95%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 95%;

  --primary: 36 164 143;
  --primary-foreground: 0 0% 100%;

  --secondary: 35, 100%, 55%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 0 0% 15%;
  --muted-foreground: 240 5% 64.9%;

  --accent: 164 35 104;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 85.7% 97.3%;
  --border: 240 3.7% 30%;
  --input: 240 3.7% 15.9%;
  --ring: 142.4 71.8% 29.2%;

  --radius: 0.3rem;

  --success: 196 52% 74%;
  --warning: 34 89% 85%;
  --error: 10 100% 86%;

  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 224.3 76.3% 48%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

.light {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;

  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;

  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;

  --primary: 34 178 170;
  --primary-foreground: 0 0% 100%;

  --secondary: 35, 100%, 55%;
  --secondary-foreground: 240 5.9% 10%;

  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;

  --accent: 164 35 104;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 142.1 76.2% 36.3%;

  --radius: 0.3rem;

  --success: 196 52% 74%;
  --warning: 34 89% 85%;
  --error: 10 100% 86%;

  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 328, 65%, 39%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 328, 65%, 39%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
  --background: 0 0% 0%;
  --foreground: 0 0% 95%;
  --card: 24 9.8% 10%;
  --card-foreground: 0 0% 95%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 95%;

  --primary: 36 164 143;
  --primary-foreground: 0 0% 100%;

  --secondary: 35, 100%, 55%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 0 0% 15%;
  --muted-foreground: 240 5% 64.9%;

  --accent: 164 35 104;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 85.7% 97.3%;
  --border: 240 3.7% 30%;
  --input: 240 3.7% 15.9%;
  --ring: 142.4 71.8% 29.2%;

  --radius: 0.3rem;

  --success: 196 52% 74%;
  --warning: 34 89% 85%;
  --error: 10 100% 86%;

  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 224.3 76.3% 48%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

.green {
  --background: 20 14.3% 4.1%;
  --foreground: 20 0% 95%;
  --card: 24 9.8% 10%;
  --card-foreground: 0 0% 95%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 95%;
  --primary: 142.1 70.6% 45.3%;
  --primary-foreground: 20 0% 95%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 15%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 20 150 62;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 85.7% 97.3%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 142.4 71.8% 29.2%;

  --radius: 0.3rem;

  --success: 196 52% 74%;
  --warning: 34 89% 85%;
  --error: 10 100% 86%;

  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 142.1 70.6% 45.3%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 142.1 70.6% 45.3%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

/* Base element styles - these need @apply so they should be in consumer's globals */
/* However, we provide the utility classes below for non-Tailwind base resets */

/* Custom utility classes that are unique to this library */
.section-padding-primary {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}

@media (min-width: 768px) {
  .section-padding-primary {
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
  }
}

@media (min-width: 1280px) {
  .section-padding-primary {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}

/* Storybook padding overrides */
.sb-main-padded {
  padding: 0 !important;
}

.sb-wrapper {
  padding: 0px !important;
}

/* Custom gradients and effects */
.icon-gradient {
  background-image: linear-gradient(to bottom, transparent 75%, #2196f3 75%, #4caf50 90%),
    linear-gradient(to right, #3f51b5 50%, #009688 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.svg-settings {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}

.fill-gradient-linear path {
  fill: url(#linear);
}

.linear-stop1 {
  stop-color: #22b2aa;
}

.linear-stop2 {
  stop-color: #a52368;
}

.gradient {
  background: linear-gradient(
    180deg,
    rgba(94, 189, 62, 1) 34%,
    rgba(255, 185, 0, 1),
    rgba(247, 130, 0, 1),
    rgba(226, 56, 56, 1),
    rgba(151, 57, 153, 1),
    rgba(0, 156, 223, 1) 91%
  );
}

/* No scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}