@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Orion Brand Colors - Primary */
    --valencia: 22 92% 64%;
    --salmon: 14 89% 73%;
    --sunflower: 48 93% 45%;
    --moss: 54 77% 35%;
    --deep-sea: 184 100% 27%;
    --mist: 170 27% 64%;

    /* Orion Brand Colors - Secondary */
    --limestone: 40 30% 81%;
    --milk: 20 14% 96%;
    --bark: 42 71% 22%;

    /* Semantic tokens using Orion palette */
    --background: 20 14% 96%;
    --foreground: 42 71% 22%;

    --card: 0 0% 100%;
    --card-foreground: 42 71% 22%;

    --popover: 0 0% 100%;
    --popover-foreground: 42 71% 22%;

    --primary: 184 100% 27%;
    --primary-foreground: 0 0% 100%;

    --secondary: 40 30% 81%;
    --secondary-foreground: 42 71% 22%;

    --muted: 20 14% 96%;
    --muted-foreground: 42 30% 40%;

    --accent: 22 92% 64%;
    --accent-foreground: 0 0% 100%;

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

    --border: 40 20% 88%;
    --input: 40 20% 88%;
    --ring: 184 100% 27%;

    --radius: 0.75rem;

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

  .dark {
    /* Orion Brand Colors - slightly adjusted for dark readability */
    --valencia: 22 92% 58%;
    --salmon: 14 89% 68%;
    --sunflower: 48 93% 50%;
    --moss: 54 77% 42%;
    --deep-sea: 184 100% 38%;
    --mist: 170 27% 55%;

    --limestone: 40 20% 30%;
    --milk: 220 15% 12%;
    --bark: 40 30% 85%;

    --background: 225 15% 10%;
    --foreground: 40 30% 90%;

    --card: 225 15% 13%;
    --card-foreground: 40 30% 90%;

    --popover: 225 15% 13%;
    --popover-foreground: 40 30% 90%;

    --primary: 184 100% 38%;
    --primary-foreground: 225 15% 10%;

    --secondary: 225 12% 18%;
    --secondary-foreground: 40 30% 85%;

    --muted: 225 12% 16%;
    --muted-foreground: 40 15% 55%;

    --accent: 22 92% 58%;
    --accent-foreground: 225 15% 10%;

    --destructive: 0 84% 55%;
    --destructive-foreground: 0 0% 98%;

    --border: 225 12% 20%;
    --input: 225 12% 20%;
    --ring: 184 100% 38%;

    --sidebar-background: 225 15% 11%;
    --sidebar-foreground: 40 30% 85%;
    --sidebar-primary: 40 30% 90%;
    --sidebar-primary-foreground: 225 15% 10%;
    --sidebar-accent: 225 12% 16%;
    --sidebar-accent-foreground: 40 30% 85%;
    --sidebar-border: 225 12% 18%;
    --sidebar-ring: 184 100% 38%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-body antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
  }
}

@layer components {
  .orion-gradient {
    background: linear-gradient(135deg, hsl(var(--deep-sea)), hsl(var(--moss)));
  }

  .orion-gradient-warm {
    background: linear-gradient(135deg, hsl(var(--valencia)), hsl(var(--salmon)));
  }

  .orion-gradient-sunflower {
    background: linear-gradient(135deg, hsl(var(--sunflower)), hsl(var(--valencia)));
  }

  .orion-card-hover {
    @apply transition-all duration-300 ease-out;
  }

  .orion-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px -12px hsl(var(--deep-sea) / 0.25);
  }
}