@import "tailwindcss";
@import "tw-animate-css";

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

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --background-start: var(--color-sky-blue);
  --background-end: var(--color-lime-300);

  /* Frutiger Aero Gradients */
  --gradient-fa-blue: 135deg, hsl(217 91% 60%) 0%, hsl(200 90% 70%) 100%;
  --gradient-fa-green: 135deg, hsl(155 70% 55%) 0%, hsl(170 80% 65%) 100%;
  --gradient-fa-card: 180deg, hsl(var(--card)) 0%, hsl(var(--card)) 90%,
    hsl(var(--card)) 100%;
  --gradient-fa-gloss: 135deg, rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 100%;

  --shadow-fa-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-fa-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-fa-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --fa-inner: inset 0 1px 2px rgba(0, 0, 0, 0.1);

  --text-shadow-default: 0 1px 1px rgba(0, 0, 0, 0.2);
  --text-shadow-sm: 0 1px 0px rgba(255, 255, 255, 0.4);
  --text-shadow-md: 0 2px 2px rgba(0, 0, 0, 0.2);
  --text-shadow-lg: 0 4px 4px rgba(0, 0, 0, 0.2);

  --font-display: var(--font-frutiger), "Arial", "Helvetica", "sans-serif";
}

:root {
  --destructive: oklch(0.577 0.245 27.325);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  --background: hsl(0 0% 98%); /* Light off-white */
  --foreground: hsl(222.2 47.4% 11.2%);

  --muted: hsl(210 20% 96.1%);
  --muted-foreground: hsl(215.4 16.3% 46.9%);

  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(222.2 47.4% 11.2%);

  --card: hsl(0 0% 100%); /* Pure white for a crisp look */
  --card-foreground: hsl(222.2 47.4% 11.2%);

  --border: hsl(214.3 31.8% 91.4%);
  --input: hsl(214.3 31.8% 91.4%);
  --ring: hsl(222.2 47.4% 11.2%);

  --primary: hsl(217 91% 60%); /* Vibrant Blue */
  --primary-foreground: hsl(210 40% 98%);

  --secondary: hsl(155 70% 55%); /* Vibrant Green */
  --secondary-foreground: hsl(210 40% 98%);

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

  --accent: hsl(210 20% 96.1%);
  --accent-foreground: hsl(222.2 47.4% 11.2%);

  --radius: 0.75rem; /* Larger border radius */
}

.dark {
  --destructive: oklch(0.704 0.191 22.216);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);

  --background: hsl(222.2 47.4% 11.2%);
  --foreground: hsl(210 40% 98%);

  --muted: hsl(217.2 32.4% 14.8%);
  --muted-foreground: hsl(215 20.2% 65.1%);

  --popover: hsl(222.2 47.4% 11.2%);
  --popover-foreground: hsl(210 40% 98%);

  --card: hsl(217.2 32.4% 14.8%);
  --card-foreground: hsl(210 40% 98%);

  --border: hsl(217.2 32.4% 14.8%);
  --input: hsl(217.2 32.4% 14.8%);
  --ring: hsl(212.7 26.8% 83.9%);

  --primary: hsl(217 91% 60%); /* Vibrant Blue (same as light) */
  --primary-foreground: hsl(210 40% 98%);

  --secondary: hsl(155 70% 55%); /* Vibrant Green (same as light) */
  --secondary-foreground: hsl(210 40% 98%);

  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(210 40% 98%);

  --accent: hsl(217.2 32.4% 14.8%);
  --accent-foreground: hsl(210 40% 98%);

  /* Frutiger Aero Gradients for dark mode (slightly adjusted) */
  --color-fa-gradient-blue: linear-gradient(
    135deg,
    hsl(217 91% 45%) 0%,
    hsl(200 90% 55%) 100%
  );
  --color-fa-gradient-green: linear-gradient(
    135deg,
    hsl(155 70% 40%) 0%,
    hsl(170 80% 50%) 100%
  );
  --color-fa-gradient-card: linear-gradient(
    180deg,
    hsl(var(--card)) 0%,
    hsl(var(--card)) 90%,
    hsl(var(--card)) 100%
  );
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
    background-image: url("/background.jpeg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }

  .glossy-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    border-radius: var(--radius); /* Inherit parent's border radius */
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.1) 100%
    );
    opacity: 0.8;
    pointer-events: none; /* Allow clicks to pass through */
    z-index: 1; /* Ensure it's above the background but below content */
  }

  .glossy-effect.bottom::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    border-radius: var(--radius);
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  .fa-gradient-blue {
    background: linear-gradient(var(--gradient-fa-blue));
  }
  .fa-gradient-green {
    background: linear-gradient(var(--gradient-fa-green));
  }
  .fa-gradient-card {
    background: linear-gradient(var(--gradient-fa-card));
  }
  .fa-gloss {
    position: relative;
  }
  .fa-gloss::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    border-radius: var(--radius);
    background: linear-gradient(var(--gradient-fa-gloss));
    opacity: 0.8;
    pointer-events: none;
    z-index: 1;
  }
  .fa-gloss.bottom::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    border-radius: var(--radius);
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
  }
}

@layer components {
  .shadow-fa-sm {
    box-shadow: var(--shadow-fa-sm), var(--fa-inner);
  }
  .shadow-fa-md {
    box-shadow: var(--shadow-fa-md), var(--fa-inner);
  }
  .shadow-fa-lg {
    box-shadow: var(--shadow-fa-lg), var(--fa-inner);
  }
  .text-shadow-default {
    text-shadow: var(--text-shadow-default);
  }
  .text-shadow-sm {
    text-shadow: var(--text-shadow-sm);
  }
  .text-shadow-md {
    text-shadow: var(--text-shadow-md);
  }
  .text-shadow-lg {
    text-shadow: var(--text-shadow-lg);
  }

  .glass-effect {
    @apply bg-card/70 backdrop-blur-lg border border-white/20 shadow-fa-lg;
  }

  .gloss-highlight::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    border-radius: inherit; /* This is key for matching the parent's border radius */
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
  }
}
