/**
 * Organic Theme Foundation
 * Nature/Organic theme with flowing green/gold gradients
 * This file provides the foundational CSS variables, base styles, and utility classes
 * for the Fachseminar Musik website transformation.
 *
 * Import this stylesheet FIRST on all pages before existing stylesheets.
 *
 * @version 1.0.0
 * @author Organic Theme System
 */

/* ============================================
   CSS CUSTOM PROPERTIES - :ROOT
   ============================================ */

:root {
    /* === NATURE THEME PALETTE === */

    /* Greens - Primary */
    --nature-green-dark: #2d5a27;      /* Forest floor */
    --nature-green-mid: #548c26;       /* Existing primary - keep */
    --nature-green-light: #7cb342;     /* Fresh leaves */
    --nature-green-pale: #aed581;      /* Soft foliage */

    /* Golds - Accent */
    --nature-gold-dark: #b8860b;       /* Dried grass */
    --nature-gold-mid: #daa520;        /* Sunlight through leaves */
    --nature-gold-light: #f9e79f;      /* Morning light */

    /* Earth Tones */
    --earth-brown: #6d4c41;            /* Bark, soil */
    --earth-taupe: #8d6e63;            /* Dried leaves */
    --earth-sand: #d7ccc8;             /* River stones */

    /* Sky/Air */
    --sky-mist: #e8f5e9;              /* Morning fog */
    --sky-dawn: #fff3e0;              /* Golden hour */

    /* === GRADIENTS === */
    --gradient-primary: linear-gradient(
        135deg,
        var(--nature-green-dark) 0%,
        var(--nature-green-mid) 50%,
        var(--nature-gold-mid) 100%
    );

    --gradient-subtle: linear-gradient(
        180deg,
        var(--sky-mist) 0%,
        rgba(174, 213, 129, 0.3) 50%,
        var(--sky-dawn) 100%
    );

    --gradient-gold: linear-gradient(
        120deg,
        var(--nature-gold-dark) 0%,
        var(--nature-gold-mid) 50%,
        var(--nature-gold-light) 100%
    );

    --gradient-earth: linear-gradient(
        145deg,
        var(--earth-brown) 0%,
        var(--earth-taupe) 50%,
        var(--earth-sand) 100%
    );

    --gradient-mist: linear-gradient(
        135deg,
        var(--sky-mist) 0%,
        rgba(232, 245, 233, 0.7) 50%,
        var(--sky-dawn) 100%
    );

    /* === SEMANTIC COLOR MAPPING === */
    --primary-color: var(--nature-green-mid);
    --primary-hover: var(--nature-green-dark);
    --accent-color: var(--nature-gold-mid);
    --bg-color: var(--sky-mist);
    --card-bg: #ffffff;
    --text-main: #1a2e1a;
    --text-muted: var(--earth-taupe);
    --border-color: rgba(84, 140, 38, 0.2);
    --shadow-color: rgba(45, 90, 39, 0.15);

    /* === SPACING TOKENS === */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */
    --space-4xl: 6rem;     /* 96px */

    /* === BORDER RADIUS (Organic, less geometric) === */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* === SHADOWS (Soft, diffused) === */
    --shadow-sm: 0 2px 8px rgba(45, 90, 39, 0.08);
    --shadow-md: 0 8px 24px rgba(45, 90, 39, 0.12);
    --shadow-lg: 0 16px 48px rgba(45, 90, 39, 0.15);
    --shadow-glow: 0 0 30px rgba(218, 165, 32, 0.3);
    --shadow-glow-green: 0 0 30px rgba(84, 140, 38, 0.3);
    --shadow-inner: inset 0 2px 8px rgba(45, 90, 39, 0.08);

    /* === ANIMATION TIMING === */
    --ease-out-organic: cubic-bezier(0.34, 1.56, 0.64, 1);  /* Bouncy */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);            /* Smooth */
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Spring */
    --duration-fast: 200ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;
    --duration-page: 1200ms;

    /* === TYPOGRAPHY === */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */
    --font-size-4xl: 2.25rem;    /* 36px */
    --font-size-5xl: 3rem;       /* 48px */

    /* === BREAKPOINTS === */
    --breakpoint-mobile: 640px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1280px;
}

/* ============================================
   ACCESSIBILITY - SKIP LINK
   ============================================ */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) 0;
    z-index: 10000;
    transition: top var(--duration-fast) var(--ease-smooth);
}

.skip-link:focus {
    top: 0;
}

/* ============================================
   BASE STYLES
   ============================================ */

/* Reset and base defaults */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-main);
    background: var(--gradient-subtle);
    background-attachment: fixed;
    min-height: 100vh;
    border-radius: var(--radius-lg);
    overflow-x: hidden;
    transition: opacity var(--duration-slow) var(--ease-smooth);
}

/* Organic border-radius defaults */
img, video, canvas, iframe, .organic-image {
    border-radius: var(--radius-md);
}

/* Typography with natural feel */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-main);
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

p {
    margin-bottom: var(--space-md);
    color: var(--text-muted);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-smooth);
    border-radius: var(--radius-sm);
}

a:hover {
    color: var(--primary-hover);
}

a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Focus styles for accessibility */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ============================================
   UTILITY CLASSES - ORGANIC SHAPES
   ============================================ */

/* Organic card with glass effect */
.organic-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-lg);
    transition: all var(--duration-base) var(--ease-smooth);
    position: relative;
    overflow: hidden;
}

.organic-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-smooth);
    z-index: -1;
}

.organic-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.organic-card:hover::before {
    opacity: 0.05;
}

/* Organic button with gradient */
.organic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background: var(--gradient-primary);
    color: white;
    font-weight: 500;
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(84, 140, 38, 0.3);
    transition: all var(--duration-base) var(--ease-smooth);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.organic-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-gold);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-smooth);
}

.organic-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(84, 140, 38, 0.4);
}

.organic-btn:hover::before {
    opacity: 0.3;
}

.organic-btn:active {
    transform: translateY(0);
}

.organic-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Organic button outline variant */
.organic-btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: none;
}

.organic-btn-outline:hover {
    background: var(--primary-color);
    color: white;
}

/* ============================================
   UTILITY CLASSES - GRADIENT TEXT
   ============================================ */

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-weight: 700;
}

.gradient-text-gold {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-weight: 700;
}

/* ============================================
   UTILITY CLASSES - GLOWING EFFECTS
   ============================================ */

.glow-gold {
    box-shadow: var(--shadow-glow);
    transition: box-shadow var(--duration-base) var(--ease-smooth);
}

.glow-gold:hover {
    box-shadow: 0 0 40px rgba(218, 165, 32, 0.5);
}

.glow-green {
    box-shadow: var(--shadow-glow-green);
    transition: box-shadow var(--duration-base) var(--ease-smooth);
}

.glow-green:hover {
    box-shadow: 0 0 40px rgba(84, 140, 38, 0.5);
}

/* Text glow effect */
.glow-text-gold {
    text-shadow: 0 0 20px rgba(218, 165, 32, 0.5);
}

.glow-text-green {
    text-shadow: 0 0 20px rgba(84, 140, 38, 0.5);
}

/* ============================================
   UTILITY CLASSES - NATURAL LAYOUTS
   ============================================ */

/* Organic grid with natural spacing */
.organic-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.organic-grid-2 {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.organic-grid-3 {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Organic flex layout */
.organic-flex {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

.organic-flex-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Organic container */
.organic-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl);
}

.organic-section {
    padding: var(--space-2xl) 0;
}

/* ============================================
   ANIMATION UTILITIES - FADE TRANSITIONS
   ============================================ */

.fade-in {
    opacity: 0;
    animation: fadeIn var(--duration-slow) var(--ease-smooth) forwards;
}

.fade-out {
    opacity: 1;
    animation: fadeOut var(--duration-slow) var(--ease-smooth) forwards;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp var(--duration-slow) var(--ease-out-organic) forwards;
}

.fade-in-down {
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeInDown var(--duration-slow) var(--ease-out-organic) forwards;
}

.fade-in-scale {
    opacity: 0;
    transform: scale(0.9);
    animation: fadeInScale var(--duration-base) var(--ease-spring) forwards;
}

/* Staggered animation delays */
.fade-in-delay-1 { animation-delay: 100ms; }
.fade-in-delay-2 { animation-delay: 200ms; }
.fade-in-delay-3 { animation-delay: 300ms; }
.fade-in-delay-4 { animation-delay: 400ms; }
.fade-in-delay-5 { animation-delay: 500ms; }

/* ============================================
   ANIMATION KEYFRAMES
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Gentle float animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Subtle pulse animation */
@keyframes pulse-subtle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Gentle rotate animation */
@keyframes rotate-gentle {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Shimmer animation for loading states */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

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

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-float-slow {
    animation: float 6s ease-in-out infinite;
}

.animate-pulse-subtle {
    animation: pulse-subtle 2s ease-in-out infinite;
}

.animate-rotate {
    animation: rotate-gentle 20s linear infinite;
}

/* Smooth hover states */
.hover-lift {
    transition: transform var(--duration-base) var(--ease-out-organic);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.hover-scale {
    transition: transform var(--duration-base) var(--ease-out-organic);
}

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

.hover-glow {
    transition: box-shadow var(--duration-base) var(--ease-smooth);
}

.hover-glow:hover {
    box-shadow: var(--shadow-glow);
}

/* ============================================
   PAGE TRANSITION CLASSES
   ============================================ */

.page-transition-enter {
    opacity: 0;
    transform: translateY(20px);
}

.page-transition-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--duration-page) var(--ease-smooth),
                transform var(--duration-page) var(--ease-out-organic);
}

.page-transition-leave {
    opacity: 1;
    transform: translateY(0);
}

.page-transition-leave-active {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity var(--duration-slow) var(--ease-smooth),
                transform var(--duration-slow) var(--ease-smooth);
}

/* Page transition container */
.page-transition-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ============================================
   PAGE-SPECIFIC HOOK CLASSES
   ============================================ */

/* Homepage */
.page-home {
    --page-primary: var(--nature-green-mid);
    --page-accent: var(--nature-gold-mid);
}

.page-home .organic-card {
    border-color: rgba(84, 140, 38, 0.15);
}

/* Spielfiguren (Music Notation) */
.page-spielfiguren {
    --page-primary: var(--nature-green-dark);
    --page-accent: var(--nature-green-light);
}

.page-spielfiguren canvas {
    background: linear-gradient(to bottom, #ffffff 0%, #fffef5 100%);
    box-shadow: var(--shadow-lg),
                inset 0 0 60px rgba(218, 165, 32, 0.1);
}

/* BPM Metronome */
.page-bpm {
    --page-primary: var(--nature-gold-mid);
    --page-accent: var(--nature-gold-light);
}

.page-bpm .organic-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
}

/* Compressor */
.page-compressor {
    --page-primary: var(--nature-green-mid);
    --page-accent: var(--nature-gold-dark);
}

.page-compressor .upload-area {
    background: linear-gradient(
        135deg,
        rgba(232, 245, 233, 0.5) 0%,
        rgba(255, 243, 224, 0.5) 100%
    );
    border: 2px dashed var(--nature-green-mid);
    border-radius: var(--radius-lg);
}

.page-compressor .upload-area:hover {
    background: linear-gradient(
        135deg,
        rgba(174, 213, 129, 0.3) 0%,
        rgba(249, 231, 159, 0.3) 100%
    );
}

/* HEIC Converter */
.page-converter {
    --page-primary: var(--nature-green-light);
    --page-accent: var(--nature-gold-mid);
}

.page-converter .upload-zone {
    background: var(--gradient-subtle);
    border: 3px dashed var(--nature-green-mid);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
    transition: all var(--duration-base);
}

.page-converter .upload-zone:hover {
    border-color: var(--nature-gold-mid);
    transform: scale(1.02);
}

/* File Browser */
.page-files {
    --page-primary: var(--nature-green-mid);
    --page-accent: var(--earth-taupe);
}

.page-files .file-item {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--duration-base);
}

.page-files .file-item:hover {
    background: rgba(232, 245, 233, 0.8);
    transform: translateX(4px);
}

.page-files .file-item.folder {
    background: linear-gradient(
        135deg,
        rgba(232, 245, 233, 0.9) 0%,
        rgba(174, 213, 129, 0.5) 100%
    );
}

/* Testing Page */
.page-testing {
    --page-primary: var(--nature-gold-mid);
    --page-accent: var(--nature-green-pale);
}

.page-testing .testing-playground {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    border: 2px solid var(--nature-gold-mid);
    border-radius: var(--radius-lg);
    min-height: 400px;
}

.page-testing .experimental-card {
    background: linear-gradient(
        135deg,
        rgba(84, 140, 38, 0.1) 0%,
        rgba(218, 165, 32, 0.1) 100%
    );
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .animate-float,
    .animate-float-slow,
    .animate-pulse-subtle,
    .animate-rotate {
        animation: none;
    }

    body {
        background: linear-gradient(
            135deg,
            var(--sky-mist) 0%,
            var(--nature-green-pale) 100%
        );
    }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Mobile */
@media (max-width: 639px) {
    :root {
        --font-size-5xl: 2.25rem;
        --font-size-4xl: 1.875rem;
        --font-size-3xl: 1.5rem;
    }

    .organic-container {
        padding: var(--space-md);
    }

    .organic-grid,
    .organic-grid-2,
    .organic-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Tablet */
@media (min-width: 768px) {
    .organic-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .organic-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   UTILITY - VISIBILITY
   ============================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hidden {
    display: none !important;
}

.visible {
    visibility: visible !important;
}

.invisible {
    visibility: hidden !important;
}

/* ============================================
   UTILITY - SPACING
   ============================================ */

.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* ============================================
   UTILITY - TEXT ALIGNMENT
   ============================================ */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ============================================
   UTILITY - BORDER RADIUS
   ============================================ */

.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-full { border-radius: var(--radius-full); }

/* ============================================
   UTILITY - SHADOWS
   ============================================ */

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }