@import "tailwindcss";

/* B2IN Domain Theme - Anthracite & Dynamic Blue */

@layer base {
  :root {
    /* Base colors */
    --background: 32 20% 97%; /* #f5f4f2 - Light Beige */
    --foreground: 20 14% 16%; /* #2a2a2a - Dark Gray */

    /* Card colors */
    --card: 0 25% 96%; /* #hsl(0 25% 96%) - Off White */
    --card-foreground: 20 14% 16%; /* #2a2a2a - Dark Gray */

    --popover: 0 25% 96%; /* #hsl(0 25% 96%)- Off White */
    --popover-foreground: 20 14% 16%; /* #2a2a2a - Dark Gray */

    /* B2IN Theme Colors */
    --primary: 209 32% 25%; /* #2b3f51 - Anthracite */
    --primary-light: 209 32% 35%; /* #2b3f51 - Anthracite */
    --primary-lighter: 209 32% 85%; /* #2b3f51 - Anthracite */
    --primary-dark: 209 32% 20%; /* #2b3f51 - Anthracite */
    --primary-foreground: 0 25% 96%; /* #hsl(0 25% 96%) - Off White */

    --secondary: 199 74% 49%; /* #20a0da - Dynamic Blue */
    --secondary-light: 199 74% 56%; /* #20a0da - Dynamic Blue */
    --secondary-lighter: 199 74% 75%; /* #20a0da - Dynamic Blue */
    --secondary-dark: 199 74% 42%; /* #20a0da - Dynamic Blue */
    --secondary-foreground: 0 25% 96%; /* hsl(0 25% 96%) - Off White */

    /* Neutral colors */
    --muted: 0 0% 92%; /* hsl(0 0% 92%) - Light Muted */
    --muted-foreground: 199 50% 35%; /* #4a8bb5 - Muted Blue */

    --accent: 210 0% 90%; /* hsl(210 5.26% 92.55%) - Light Accent */
    --accent-dark: 210 0% 85%; /* hsl(210 5.26% 92.55%) - Light Accent */
    --accent-foreground: 20 14% 16%; /* #2a2a2a - Dark Gray */

    /* Dark section colors */
    --dark-bg: 209 32% 25%; /* Matching primary */
    --dark-text: 0 0% 100%; /* hsl(0 0% 100%) - Off White */
    --dark-muted: 0 0% 80%; /* hsl(0 0% 80%) - Dark Muted */

    /* Interactive elements */
    --destructive: 0 84.2% 60.2%; /* #ef4444 - Red */
    --destructive-foreground: 210 40% 98%; /* #f8fafc - Light */

    --border: 0 0% 80%; /* hsl(0 0% 80%) - Light Border */
    --input: 0 0% 92%; /* hsl(0 0% 92%) - Input Background */
    --ring: 20 14% 16%; /* #2a2a2a - Focus Ring */

    --radius: 0.75rem;

    /* Hero container background */
    --hero-container: 0 0% 93%; /* #e8e8e8 - Light Gray */
    --hero-container-dark: 0 0% 85%; /* #e8e8e8 - Light Gray */
    --hero-container-light: 0 0% 95%; /* #e8e8e8 - Light Gray */

    /* Consistent shadows */
    --shadow-warm: 0 10px 30px -15px hsl(var(--foreground) / 0.1);
    --shadow-card: 0 4px 20px -8px hsl(var(--foreground) / 0.08);
    --shadow-elevated: 0 20px 40px -20px hsl(var(--foreground) / 0.15);
    --shadow-accent-glow: 0 0 30px hsl(var(--secondary) / 0.3);

    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Font families */
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --font-secondary: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, sans-serif;
  }
}

/* Shadow Effects - Updated for new primary color */
.shadow-elegant {
    box-shadow: 0 10px 30px -10px rgba(0, 136, 204, 0.2);
}

.shadow-elegant-white {
    box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.2);
}

.shadow-white {
    box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.4);
}

.elegant-shadow-card {
    box-shadow:
        0 2px 8px -2px rgba(0, 0, 0, 0.08),
        0 4px 10px 0px rgba(0, 136, 204,1);
}

.shadow-premium {
    box-shadow: 0 20px 60px -15px rgba(0, 136, 204, 0.3);
}

/* Glow Effects - Inspired by Möbius band's luminous edge */
.glow-soft {
    box-shadow:
        0 0 10px rgba(0, 155, 221, 0.15),
        0 0 20px rgba(0, 155, 221, 0.1),
        0 4px 10px -4px rgba(0, 136, 204, 0.2);
}

.glow-medium {
    box-shadow:
        0 0 15px rgba(0, 155, 221, 0.25),
        0 0 30px rgba(0, 155, 221, 0.15),
        0 5px 10px -5px rgba(0, 136, 204, 0.3);
}

.glow-strong {
    box-shadow:
        0 0 30px rgba(0, 155, 221, 0.35),
        0 0 60px rgba(0, 155, 221, 0.2),
        0 0 90px rgba(0, 113, 168, 0.1),
        0 10px 10px -10px rgba(0, 136, 204, 0.4);
}
.icon-secondary-linear {
  background-color: hsl(var(--secondary) / 0.1);
  background: linear-gradient(
    135deg,
    hsl(var(--secondary)) 0%,
    hsl(var(--secondary-dark)) 100%
  );
  color: hsl(var(--secondary-foreground)) !important;
  position: relative;
}

.text-section-title {
    line-height: 0.95em;
}
.variante-glass-flow {

    & * {
        will-change: auto;
    } section,
    & .section-container {
        background: linear-gradient(
          135deg,
          hsl(var(--background)) 0%,
          hsl(var(--background)/90%) 100%
        );
        position: relative;
    }
    & section.bg-accent {
        background: linear-gradient(
        135deg,
        hsl(var(--accent) /0.5) 0%,
        hsl(var(--accent-dark) / 0.5) 100%
        );
        position: relative;
    }
    & section.bg-secondary {
        background: linear-gradient(
          135deg,
          hsl(var(--secondary)) 0%,
          hsl(var(--secondary-dark)) 100%
        );
        position: relative;
    }
    & div.bg-hero-container {
        border: 1px solid rgba(255, 255, 255, 0.9);

        background: linear-gradient(
          135deg,
          hsl(var(--hero-container)) 0%,
          hsl(var(--hero-container-dark)) 100%
        );
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);

        position: relative;
    }


     /* Cards - Multi-Layer-Schatten für Tiefe (Optimiert) */
  & .card,
  & [class*="card"],
  & .bg-card {
    background:
      linear-gradient(
        145deg,
        hsl(0 0% 100%) 0%,
        hsl(0 0% 99.5%) 40%,
        hsl(0 0% 99%) 100%
      );
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.03),
      0 1px 1px rgba(0, 0, 0, 0.02),
      0 2px 3px rgba(0, 0, 0, 0.025),
      0 4px 6px rgba(0, 0, 0, 0.03),
      0 8px 12px rgba(0, 0, 0, 0.04),
      0 12px 20px rgba(0, 0, 0, 0.045),
      inset 0 1px 2px rgba(255, 255, 255, 0.8),
      inset 0 -1px 1px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.9);
    transition:
      transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
      filter 0.3s ease;
    position: relative;
  }



  & .card:hover,
  & [class*="card"]:hover {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.04),
      0 2px 4px rgba(0, 0, 0, 0.03),
      0 4px 8px rgba(0, 0, 0, 0.04),
      0 8px 16px rgba(0, 0, 0, 0.05),
      0 16px 24px rgba(0, 0, 0, 0.07),
      0 24px 40px rgba(0, 0, 0, 0.08),
      0 32px 64px rgba(0, 0, 0, 0.06),
      inset 0 1px 3px rgba(255, 255, 255, 0.9),
      inset 0 -1px 2px rgba(0, 0, 0, 0.03);
    transform: translateY(-2px) scale(1.005);
    filter: brightness(1.01);
  }

  & button,
  & .btn,
  & .btn-secondary,
  & a[class*="btn"],
  & [role="button"] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.05),
      0 2px 4px rgba(0, 0, 0, 0.06),
      0 4px 8px rgba(0, 0, 0, 0.07),
      0 8px 16px rgba(0, 0, 0, 0.05);
    transition:
      transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      filter 0.2s ease;
  }

  & button:hover,
  & .btn:hover,
  & .btn-secondary:hover,
  & a[class*="btn"]:hover,
  & [role="button"]:hover {
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.06),
      0 4px 8px rgba(0, 0, 0, 0.08),
      0 8px 16px rgba(0, 0, 0, 0.1),
      0 16px 32px rgba(0, 0, 0, 0.08),
      0 0 40px hsla(199, 74%, 49%, 0.3);
    transform: translateY(-2px);
    filter: brightness(1.08);
  }

   /* Scroll-Optimierung für sanftere Animationen */
   & {
    scroll-behavior: smooth;
  }
}

@import "./shared-styles.css";