/**
 * experimenta Design System - Tailwind CSS v4
 *
 * This file contains:
 * - CSS Custom Properties for the experimenta theme
 * - Tailwind base styles
 * - Custom component classes
 * - Utility classes for the design system
 */

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

/* ========================================
   FONT FACE DECLARATIONS (Roboto - Local)
   ======================================== */

/**
 * Roboto Variable Font - Local Hosting
 *
 * Font files are hosted locally for DSGVO compliance and better performance.
 * This variable font supports all weights from 100-900.
 *
 * Format: WOFF2 (best compression, modern browsers)
 * Coverage: Latin characters
 * File location: /public/fonts/roboto/Roboto-VariableFont-latin.woff2
 */

/* Roboto Variable Font - Normal Style (Latin) */
/* Supports all weights from 100-900 (including 300, 400, 500, 700 that we use) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: block;
  src: url('/fonts/roboto/Roboto-VariableFont-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */

@layer base {
  :root {
    /* shadcn-ui CSS variables (HSL format) - customized for experimenta */
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    /* Primary: experimenta Pink #e6007e */
    --primary: 328 100% 45%;
    --primary-foreground: 210 40% 98%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    /* Accent: experimenta Orange #f59d24 */
    --accent: 35 91% 55%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --radius: 0.5rem;

    /* Primary Colors */
    --color-primary: #e6007e;
    --color-primary-hover: #c2006a;
    --color-primary-light: #ff4081;

    --color-secondary: #e91e63;
    --color-secondary-dark: #c2185b;

    --color-accent: #f59d24;
    --color-accent-hover: #ffb347;

    --color-red: #e40521;

    /* Purple Variants (Background) */
    --color-purple-dark: #2e1065;
    --color-purple-deeper: #1a0a3a;
    --color-purple-darkest: #0f051d;

    /* Semantic Colors */
    --color-success: #46c74a;
    --color-success-dark: #3ba83e;

    --color-error: #e53e3e;
    --color-error-dark: #c53030;

    --color-warning: #f59d24;
    --color-warning-dark: #dd8a1e;

    --color-info: #4299e1;
    --color-info-dark: #3182ce;

    /* Background Gradients */
    --bg-gradient-primary: linear-gradient(135deg, #2e1065 0%, #1a0a3a 50%, #0f051d 100%);
    --bg-gradient-footer: linear-gradient(135deg, #1a0a3a 0%, #0f051d 100%);
    --bg-gradient-glass: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.05)
    );
    --bg-gradient-button: linear-gradient(to left, #e6007e, #e6007e, #e40521, #e6007e);
    --bg-gradient-success: linear-gradient(90deg, #46c74a 0%, #66d96a 50%, #46c74a 100%);

    /* Header & Footer */
    --bg-header: rgba(46, 16, 101, 0.95);

    /* Glass-morphism */
    --glass-border: 1px solid rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

    /* Section Backgrounds */
    --bg-section: rgba(255, 255, 255, 0.08);
    --bg-section-hover: rgba(255, 255, 255, 0.15);

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.8);
    --text-disabled: rgba(255, 255, 255, 0.5);

    --text-dark: #333333;
    --text-dark-secondary: #666666;

    /* Border Colors */
    --border-accent: 4px solid #f59d24;
    --border-light: 1px solid rgba(255, 255, 255, 0.2);
    --border-footer: 1px solid rgba(255, 255, 255, 0.1);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 30px;
    --space-10: 40px;
    --space-15: 60px;
    --space-20: 80px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-2xl: 25px;

    /* Containers */
    --container-main: 800px;
    --container-wide: 1200px;
    --container-full: 1760px;
  }

  /* Base Styles */
  * {
    @apply box-border;
  }

  html {
    @apply w-full overflow-x-hidden;
  }

  body {
    @apply font-sans antialiased;
    @apply bg-gradient-primary;
    @apply text-white;
    @apply min-h-screen w-full;
    @apply overflow-x-hidden m-0 p-0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    line-height: 1.6;
  }

  /* Typography */
  h1 {
    @apply text-4xl md:text-3xl sm:text-2xl;
    @apply font-light tracking-tight;
    @apply mb-8;
  }

  h2 {
    @apply text-3xl md:text-2xl sm:text-xl;
    @apply font-light;
    @apply mb-6;
  }

  h3 {
    @apply text-2xl md:text-xl sm:text-lg;
    @apply font-normal;
    @apply mb-4;
  }

  p {
    @apply text-lg md:text-base sm:text-sm;
    @apply leading-relaxed;
  }

  a {
    @apply transition-colors duration-300;
  }

  /* Focus Styles (Accessibility) */
  *:focus-visible {
    @apply outline-none ring-2 ring-accent ring-offset-2;
    ring-offset-color: var(--color-purple-darkest);
  }
}

/* ========================================
   TAILWIND THEME INTEGRATION
   ======================================== */

/**
 * @theme inline - Make CSS variables available to Tailwind CSS v4
 * This allows shadcn-nuxt components to use these colors directly
 */
@theme inline {
  /* Map shadcn-ui CSS variables to Tailwind colors */
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  /* Border radius tokens */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

/* ========================================
   COMPONENT CLASSES
   ======================================== */

@layer components {
  /* Buttons */
  .btn-primary {
    @apply px-8 py-2.5 rounded-2xl;
    @apply text-lg font-medium text-white;
    @apply cursor-pointer;
    @apply transition-all duration-1000;
    @apply outline-0 border-0;
    background: var(--color-primary);
    background-image: var(--bg-gradient-button);
    background-size: 300%;
    background-position: left;
    line-height: 1.7em;
  }

  .btn-primary:hover {
    background-position: right;
  }

  /* experimenta Button (Official Design) */
  .btn-experimenta {
    @apply inline-block relative;
    @apply px-[30px] py-[10px];
    @apply text-lg font-medium text-white;
    @apply rounded-[25px];
    @apply cursor-pointer;
    @apply border-0 outline-0;
    @apply no-underline;
    background: var(--color-primary);
    background-image: var(--bg-gradient-button);
    background-size: 300%;
    background-position: 0%;
    line-height: 1.7em;
    transition:
      background-position 1s,
      all 0.3s ease;
  }

  .btn-experimenta:hover {
    background-position: 100%;
  }

  /* Responsive button sizes */
  @media (max-width: 480px) {
    .btn-primary {
      @apply px-6 py-2 text-base;
    }

    .btn-experimenta {
      @apply px-6 py-2 text-base;
    }
  }

  /* Secondary Button (White Border) */
  .btn-secondary {
    @apply inline-block relative;
    @apply px-[30px] py-[10px];
    @apply text-lg font-medium text-white;
    @apply rounded-[25px];
    @apply cursor-pointer;
    @apply bg-transparent;
    @apply border-2 border-white/30;
    @apply outline-0;
    @apply no-underline;
    line-height: 1.7em;
    transition: all 0.3s ease;
  }

  .btn-secondary:hover {
    @apply bg-white text-purple-darkest;
    @apply border-white;
  }

  /* Destructive Button (EXP Signalorange - Warning/Danger Actions) */
  .btn-destructive {
    @apply inline-block relative;
    @apply px-[30px] py-[10px];
    @apply text-lg font-medium text-white;
    @apply rounded-[25px];
    @apply cursor-pointer;
    @apply border-0 outline-0;
    @apply no-underline;
    background: #ea5b0c;
    background-image: linear-gradient(to left, #ea5b0c, #ea5b0c, #c7490a, #ea5b0c);
    background-size: 300%;
    background-position: 0%;
    line-height: 1.7em;
    transition:
      background-position 1s,
      all 0.3s ease;
  }

  .btn-destructive:hover {
    background-position: 100%;
  }

  /* Cards */
  .card-glass {
    background: var(--bg-gradient-glass);
    backdrop-filter: blur(15px);
    @apply rounded-xl border shadow-glass;
    border: var(--border-light);
    @apply p-15 md:p-10 sm:p-8;
  }

  @media (max-width: 768px) {
    .card-glass {
      @apply rounded-lg;
    }
  }

  .card-info {
    background: var(--bg-section);
    @apply rounded-xl;
    @apply p-8 md:p-6 sm:p-5;
    @apply border-l-4 border-accent;
  }

  .card-info h3 {
    @apply text-accent font-medium mb-4;
  }

  /* White Info Card - like experimenta.science homepage */
  .card-white {
    @apply bg-white rounded-2xl;
    @apply p-8 md:p-6 sm:p-5;
    @apply shadow-lg;
    @apply transition-transform duration-300;
  }

  .card-white:hover {
    @apply -translate-y-1;
  }

  .card-white h2,
  .card-white h3 {
    @apply text-black font-bold mb-4;
    @apply text-2xl md:text-xl;
  }

  .card-white p {
    @apply text-gray-800 text-base leading-relaxed mb-6;
  }

  .card-white a {
    @apply text-experimenta-primary font-bold;
    @apply inline-flex items-center gap-2;
    @apply transition-colors duration-300;
  }

  .card-white a:hover {
    @apply text-experimenta-accent;
  }

  .card-white a::after {
    content: '›';
    @apply text-2xl font-normal;
    transform: translateY(-2px);
  }

  /* Progress Card - with Safrangold accent border */
  .card-progress {
    background: rgba(255, 255, 255, 0.08);
    @apply rounded-2xl md:rounded-lg;
    @apply p-8 md:p-6 sm:p-5;
  }

  /* Accent Border (Left) - Safrangold (#f59d24) */
  .card-accent-border {
    border-left: 6px solid #f59d24;
    @apply rounded-l-lg;
  }

  /* Progress Bar Components */
  .card-progress .progress-header {
    @apply flex justify-between items-center mb-5 flex-wrap gap-2;
  }

  .card-progress .progress-title {
    @apply text-xl font-medium m-0;
    color: #f59d24;
    font-size: 20px;
  }

  .card-progress .progress-stats {
    @apply text-lg font-normal;
    color: rgba(255, 255, 255, 0.9);
  }

  .card-progress .progress-bar-wrapper {
    @apply relative w-full;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .card-progress .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #46c74a 0%, #66d96a 50%, #46c74a 100%);
    border-radius: 25px;
    @apply transition-all duration-300;
    position: relative;
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
  }

  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  .card-progress .progress-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    @apply font-bold text-white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    z-index: 2;
    width: 100%;
    text-align: center;
  }

  .card-info p {
    @apply text-white/90;
  }

  /* Status Messages */
  .status-message {
    @apply flex items-center gap-3;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.15); /* White with 15% opacity */
    color: #ffffff; /* White text */
    font-size: 0.875rem;
    font-weight: 500;
  }

  .status-icon {
    @apply flex items-center justify-center;
    @apply flex-shrink-0;
    width: 1.5rem;
    height: 1.5rem;
  }

  .status-success {
    @apply border-l-4 border-success;
  }

  .status-success .status-icon {
    @apply text-success;
  }

  .status-error {
    @apply border-l-4 border-warning;
  }

  .status-error .status-icon {
    @apply text-warning;
  }

  .status-warning {
    @apply border-l-4 border-warning;
  }

  .status-warning .status-icon {
    @apply text-warning;
  }

  .status-info {
    @apply border-l-4 border-accent;
  }

  .status-info .status-icon {
    @apply text-accent;
  }

  /* Progress Bar */
  .progress-container {
    background: var(--bg-section);
    @apply rounded-2xl md:rounded-lg;
    @apply p-8 md:p-6 sm:p-5;
    @apply border-l-4 border-accent;
  }

  .progress-header {
    @apply flex justify-between items-center;
    @apply flex-wrap gap-4;
    @apply mb-5;
  }

  @media (max-width: 768px) {
    .progress-header {
      @apply flex-col items-start gap-4;
    }
  }

  .progress-title {
    @apply text-xl md:text-lg sm:text-base;
    @apply font-medium text-accent;
    @apply m-0;
  }

  .progress-stats {
    @apply text-lg md:text-base sm:text-sm;
    @apply text-white/90 font-normal;
  }

  .progress-bar-wrapper {
    @apply relative w-full h-8 md:h-7 sm:h-6;
    @apply bg-white/10;
    @apply overflow-hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 25px;
  }

  .progress-bar {
    @apply h-full;
    background: var(--bg-gradient-success);
    @apply transition-all duration-500;
    @apply animate-shimmer;
    background-size: 200%;
    border-radius: 25px;
  }

  .progress-percentage {
    @apply absolute inset-0;
    @apply flex items-center justify-center;
    @apply text-base md:text-sm font-semibold text-white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    @apply z-10;
  }

  /* Forms */
  .form-field {
    @apply mb-6;
  }

  .form-label {
    @apply block text-lg md:text-base font-medium text-white/90;
    @apply mb-3;
  }

  .form-input {
    @apply w-full px-4 py-3;
    @apply bg-white/10 border border-white/20;
    @apply rounded-xl;
    @apply text-white;
    @apply transition-all duration-300;
  }

  .form-input::placeholder {
    @apply text-white/50;
  }

  .form-input:hover {
    @apply bg-white/15;
  }

  .form-input:focus {
    @apply outline-none ring-2 ring-accent;
  }

  /* Form Error Message - High contrast with orange accent */
  .form-error {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid var(--color-warning); /* Orange left border for accessibility */
    background-color: rgba(255, 255, 255, 0.15); /* White with 15% opacity */
    color: #ffffff; /* White text */
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .form-checkbox {
    @apply flex items-start gap-3 cursor-pointer;
  }

  .checkbox-input {
    @apply w-5 h-5 mt-0.5;
    @apply rounded border-2 border-white/30;
    @apply bg-white/10;
    @apply cursor-pointer;
    @apply transition-all duration-300;
  }

  .checkbox-input:checked {
    @apply bg-accent border-accent;
  }

  .checkbox-input:focus {
    @apply ring-2 ring-accent;
  }

  .checkbox-label {
    @apply text-base text-white/90;
  }

  /* Links */
  .link-primary {
    @apply text-accent;
    @apply font-medium;
    @apply transition-colors duration-300;
  }

  .link-primary:hover {
    @apply brightness-125;
  }

  .link-accent {
    @apply text-accent;
    @apply font-medium;
    @apply transition-colors duration-300;
  }

  .link-accent:hover {
    @apply brightness-125;
  }

  /* Header & Footer */
  .header-wrapper {
    background: var(--bg-header);
    backdrop-filter: blur(10px);
    @apply relative z-50;
    @apply py-8;
  }

  .header-content {
    @apply max-w-container-wide mx-auto;
    @apply px-5;
    @apply flex justify-center items-center;
  }

  .footer {
    background: var(--bg-gradient-footer);
    @apply mt-20;
    @apply relative;
  }

  .footer-content {
    @apply max-w-container-wide mx-auto;
    @apply px-5 py-15;
  }

  .footer-bottom {
    border-top: var(--border-footer);
    @apply pt-8;
    @apply flex justify-between items-center;
    @apply flex-wrap gap-5;
  }

  @media (max-width: 768px) {
    .footer-bottom {
      @apply flex-col text-center gap-4;
    }
  }

  .footer-bottom p {
    @apply text-white/80 text-base md:text-sm;
    @apply font-normal m-0;
  }

  .footer-bottom-links {
    @apply flex gap-8 md:gap-5;
  }

  .footer-bottom-links a {
    @apply text-white/80 no-underline;
    @apply text-base md:text-sm font-bold;
    @apply transition-colors duration-300;
  }

  .footer-bottom-links a:hover {
    @apply text-primary-light;
  }

  /* Logo */
  .logo {
    @apply flex items-center no-underline text-white;
    @apply transition-all duration-300;
  }

  .logo:hover {
    transform: scale(1.05);
  }

  .logo-svg {
    @apply w-[300px] md:w-[250px] sm:w-[200px];
    @apply h-auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  }

  /* Contact Info */
  .contact-info {
    background: var(--bg-section);
    @apply rounded-xl;
    @apply p-10 md:p-6 sm:p-5;
    @apply text-center;
    @apply border-l-4 border-accent;
  }

  .contact-info p {
    @apply text-lg md:text-base sm:text-sm;
    @apply text-white/90;
    @apply mb-8;
    @apply leading-relaxed;
  }

  .contact-item {
    @apply m-5 p-0;
    @apply bg-transparent border-0;
  }

  .contact-item strong {
    @apply text-accent;
    @apply block mb-3;
    @apply text-lg md:text-base font-semibold;
    letter-spacing: 0.5px;
  }

  .contact-item a {
    @apply text-white no-underline;
    @apply text-lg md:text-base font-normal;
    @apply transition-colors duration-300;
    word-break: break-all;
    overflow-wrap: break-word;
  }

  .contact-item a:hover {
    @apply text-accent-hover;
  }

  /* Info Section */
  .info-section {
    background: var(--bg-section);
    @apply rounded-xl;
    @apply p-8 md:p-6 sm:p-5;
    @apply text-center;
    @apply border-l-4 border-accent;
  }

  .info-section p {
    @apply text-lg md:text-base sm:text-sm;
    @apply text-white/90;
    @apply m-0 leading-relaxed;
  }

  .info-section a {
    @apply text-accent underline;
    @apply font-medium;
    @apply text-lg md:text-base sm:text-sm;
    @apply transition-colors duration-300;
  }

  .info-section a:hover {
    @apply text-primary-light;
  }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

@layer utilities {
  /* Container utilities */
  .container-main {
    @apply max-w-container-main mx-auto;
  }

  .container-wide {
    @apply max-w-container-wide mx-auto;
  }

  .container-full {
    @apply max-w-container-full mx-auto;
  }

  /* Background utilities */
  .bg-gradient-primary {
    background: var(--bg-gradient-primary);
  }

  .bg-gradient-footer {
    background: var(--bg-gradient-footer);
  }

  .bg-gradient-glass {
    background: var(--bg-gradient-glass);
  }

  .bg-gradient-button {
    background: var(--bg-gradient-button);
  }

  .bg-gradient-success {
    background: var(--bg-gradient-success);
  }

  .bg-header {
    background: var(--bg-header);
  }

  .bg-section {
    background: var(--bg-section);
  }

  .bg-section-hover {
    background: var(--bg-section-hover);
  }

  /* Backdrop utilities */
  .backdrop-blur-xl {
    backdrop-filter: blur(15px);
  }

  /* Shadow utilities */
  .shadow-glass {
    box-shadow: var(--glass-shadow);
  }

  /* Hover effects */
  .hover-scale {
    @apply transition-transform duration-300;
  }

  .hover-scale:hover {
    transform: scale(1.05);
  }

  /* Mobile-specific utilities */
  @media (max-width: 768px) {
    .mobile-scroll-bg {
      background-attachment: scroll !important;
    }
  }

  /* Text utilities */
  .text-shadow-lg {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  }

  /* Responsive padding utilities */
  .responsive-padding {
    @apply p-15 md:p-10 sm:p-8;
  }

  .responsive-padding-section {
    @apply p-8 md:p-6 sm:p-5;
  }
}