/* ============================================
   TOKENS.CSS - Design System Tokens
   Ergotherapie Oldenburg Website
   ============================================
   
   This file contains all design tokens (CSS custom properties)
   for the website. Tokens are organized by category.
   
   IMPORTANT: This file should be loaded BEFORE main.css.
   main.css retains its own :root as a compatibility layer.
   
   Token values match the current design exactly - no redesign.
   
   Created: 2026-01-31 (Phase 2 - Styling)
   ============================================ */

/* ============================================
   FONT FACES - Inter (Local)
   ============================================ */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-v20-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-v20-latin-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-v20-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-v20-latin-500italic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-v20-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-v20-latin-600italic.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-v20-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-v20-latin-700italic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-v20-latin-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-v20-latin-800italic.woff2") format("woff2");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}


:root {
    /* ========================================
       1. CORE COLORS
       ======================================== */
    
    /* Base Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-white-rgb: 255, 255, 255;
    --color-black-rgb: 0, 0, 0;
    
    /* Background Colors */
    --color-background: #ffffff;
    --color-background-alt: #f9fbfd;
    --color-surface: #ffffff;
    --color-surface-raised: #fdfdfd;
    
    /* Text Colors */
    --color-text: #2c3e50;
    --color-text-muted: #7f8c8d;
    --color-text-subtle: #95a5a6;
    --color-text-dark: #34495e;
    --color-text-hero: #576574;
    
    
    /* ========================================
       2. BRAND COLORS
       ======================================== */
    
    /* Primary - Green */
    --color-primary: #5cad47;
    --color-primary-light: #7bc466;
    --color-primary-dark: #4a8c39;
    --color-primary-bg: #f0f9eb;
    --color-primary-bg-light: #e9f6df;
    --color-primary-rgb: 92, 173, 71;
    
    /* Secondary Green (used in components.css) */
    --color-secondary-green: #80c542;
    --color-secondary-green-border: #cfecc1;
    --color-secondary-green-rgb: 128, 197, 66;
    
    /* Accent - Orange */
    --color-accent: #FF8C00;
    --color-accent-dark: #e67e00;
    --color-accent-bg: #fff3e0;
    --color-accent-rgb: 255, 140, 0;
    
    
    /* ========================================
       3. GREY SCALE
       ======================================== */
    
    --color-grey-50: #f8f9fa;
    --color-grey-100: #f0f0f0;
    --color-grey-200: #e9ecef;
    --color-grey-300: #e0e0e0;
    --color-grey-400: #bdc3c7;
    --color-grey-450: #aaaaaa;
    --color-grey-500: #95a5a6;
    --color-grey-600: #7f8c8d;
    --color-grey-700: #666666;
    --color-grey-800: #555555;
    --color-grey-900: #2c3e50;
    
    
    /* ========================================
       4. SEMANTIC COLORS
       ======================================== */
    
    /* Borders & Dividers */
    --color-border: #e9ecef;
    --color-border-light: #f0f0f0;
    --color-divider: #eeeeee;
    --color-divider-dark: #dddddd;
    
    /* Footer */
    --color-footer-bg: #2c3e50;
    --color-footer-text: #ecf0f1;
    --color-footer-link: #bdc3c7;
    
    /* Form */
    --color-form-bg: #fcfcfc;
    --color-danger: #dc3545;
    --color-danger-rgb: 220, 53, 69;
    --color-danger-bg: #fff5f5;
    --color-success-text: #2d5a1d;
    
    /* Overlays */
    --color-overlay-dark: rgba(0, 0, 0, 0.9);
    --color-overlay-dark-strong: rgba(0, 0, 0, 0.5);

    /* Balance Guide */
    --color-balance-bewegung: #8bc34a;
    --color-balance-medien: #ff9800;
    --color-balance-schlaf: #3b5998;
    --color-balance-bewegung-text: #558b2f;
    --color-balance-medien-text: #e65100;
    --color-balance-schlaf-text: #1a237e;
    
    /* Text Accents */
    --color-text-strong: #333333;
    
    /* Light Grey (alias for compatibility) */
    --color-light-grey: #f8f9fa;
    
    
    /* ========================================
       5. TYPOGRAPHY - Font Families
       ======================================== */
    
    --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    
    
    /* ========================================
       6. TYPOGRAPHY - Font Sizes
       ======================================== */
    
    /* Base: 16px = 1rem */
    --font-size-2xs: 0.65rem;   /* 10.4px - logo owners */
    --font-size-xs: 0.78rem;    /* 12.5px - badges */
    --font-size-sm: 0.85rem;    /* 13.6px - logo subline, small text */
    --font-size-base: 1rem;     /* 16px - body */
    --font-size-md: 1.05rem;    /* 16.8px - nav links */
    --font-size-lg: 1.1rem;     /* 17.6px - intro headings */
    --font-size-xl: 1.2rem;     /* 19.2px - lead text */
    --font-size-2xl: 1.35rem;   /* 21.6px - hero paragraph */
    
    /* Headings */
    --font-size-h4: 1.25rem;    /* 20px */
    --font-size-h3: 1.75rem;    /* 28px */
    --font-size-h2: 2.5rem;     /* 40px */
    --font-size-h1: 3.5rem;     /* 56px */
    
    /* Component-specific */
    --font-size-logo: 1.75rem;  /* 28px */
    --font-size-team-title: 2.8rem; /* 44.8px - team section title */
    
    
    /* ========================================
       7. TYPOGRAPHY - Font Weights
       ======================================== */
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    
    /* ========================================
       8. TYPOGRAPHY - Line Heights
       ======================================== */
    
    --line-height-none: 1;
    --line-height-tight: 1.2;
    --line-height-snug: 1.3;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.5;
    --line-height-loose: 1.7;
    
    
    /* ========================================
       9. SPACING SCALE
       ======================================== */
    
    /* Based on 0.5rem (8px) increments */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.25rem;   /* 4px */
    --space-1: 0.5rem;      /* 8px */
    --space-1-5: 0.75rem;   /* 12px */
    --space-2: 1rem;        /* 16px */
    --space-2-5: 1.25rem;   /* 20px */
    --space-3: 1.5rem;      /* 24px */
    --space-4: 2rem;        /* 32px */
    --space-5: 2.5rem;      /* 40px */
    --space-6: 3rem;        /* 48px */
    --space-7: 3.5rem;      /* 56px */
    --space-8: 4rem;        /* 64px */
    --space-10: 5rem;       /* 80px */
    --space-12: 6rem;       /* 96px */
    --space-16: 8rem;       /* 128px */
    
    /* Semantic Spacing */
    --space-section: 8rem;          /* Section padding */
    --space-section-compact: 4rem;  /* Compact section */
    --space-container: 30px;        /* Container padding */
    --space-card: 3.5rem;           /* Card padding */
    --space-card-sm: 2rem;          /* Small card padding */
    
    
    /* ========================================
       10. BORDER RADIUS
       ======================================== */
    
    --radius-none: 0;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-2xl: 50px;     /* Pill buttons */
    --radius-full: 9999px;  /* Circles */
    
    /* Component-specific */
    --radius-card: var(--radius-lg);
    --radius-button: var(--radius-2xl);
    --radius-input: var(--radius-sm);
    
    
    /* ========================================
       11. SHADOWS
       ======================================== */
    
    /* General Purpose */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.2);
    
    /* Component-specific (from main.css) */
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.05);
    --shadow-nav: 0 4px 20px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 20px 40px rgba(92, 173, 71, 0.15);
    --shadow-button: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-button-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-team-card: 0 5px 20px rgba(0, 0, 0, 0.08);
    --shadow-team-card-hover: 0 12px 28px rgba(0, 0, 0, 0.12);
    --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-cta: 0 20px 40px rgba(92, 173, 71, 0.2);
    --shadow-fab: 0 4px 10px rgba(0, 0, 0, 0.2);
    --shadow-nav-mobile: 0 10px 10px rgba(0, 0, 0, 0.1);
    --shadow-image-soft: 0 5px 15px rgba(0, 0, 0, 0.05);
    --shadow-grid-cell: 0 4px 15px rgba(0, 0, 0, 0.06);
    --shadow-teaser: 0 2px 8px rgba(92, 173, 71, 0.1);
    --shadow-focus-danger: 0 0 0 4px rgba(220, 53, 69, 0.1);
    --shadow-pulse-start: 0 0 0 0 rgba(92, 173, 71, 0.4);
    --shadow-pulse-mid: 0 0 0 10px rgba(92, 173, 71, 0);
    
    /* Glow Effects */
    --shadow-focus: 0 0 0 4px rgba(92, 173, 71, 0.1);
    
    
    /* ========================================
       12. TRANSITIONS
       ======================================== */
    
    /* Durations */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.4s;
    --transition-slower: 0.5s;
    --transition-slowest: 0.6s;
    --transition-speed: 0.3s; /* Alias for compatibility */
    
    /* Timing Functions */
    --ease-linear: linear;
    --ease-default: ease;
    --ease-in: ease-in;
    --ease-out: ease-out;
    --ease-in-out: ease-in-out;
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-carousel: cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Combined Transitions */
    --transition-all: all var(--transition-normal) var(--ease-default);
    --transition-colors: color var(--transition-normal) var(--ease-default), background-color var(--transition-normal) var(--ease-default), border-color var(--transition-normal) var(--ease-default);
    --transition-transform: transform var(--transition-normal) var(--ease-default);
    --transition-opacity: opacity var(--transition-normal) var(--ease-default);
    
    
    /* ========================================
       13. Z-INDEX SCALE
       ======================================== */
    
    --z-below: -1;
    --z-base: 0;
    --z-raised: 1;
    --z-dropdown: 100;
    --z-sticky: 1000;
    --z-nav: 1000;
    --z-hamburger: 1001;
    --z-logo: 1002;
    --z-overlay: 9999;
    --z-lightbox: 99999;
    --z-modal: 999999;
    
    
    /* ========================================
       14. COMPONENT SIZES
       ======================================== */
    
    /* Container */
    --container-max-width: 1300px;
    --container-max-width-lg: 1400px;
    --container-max-width-xl: 1500px;
    
    /* Navbar */
    --navbar-height: 90px;
    
    /* Buttons */
    --button-padding-y: 14px;
    --button-padding-x: 32px;
    --button-padding-sm-y: 10px;
    --button-padding-sm-x: 20px;
    
    /* Cards */
    --card-padding: 3.5rem;
    --card-padding-sm: 2rem;
    --card-border-width: 1px;
    
    /* Forms */
    --input-padding: 16px;
    --input-border-width: 2px;
    
    /* Team Component */
    --team-image-width: 85px;
    --team-image-height: 114px;
    --team-image-width-modal: 170px;
    --team-image-height-modal: 228px;
    
    /* Back to Top */
    --back-to-top-size: 50px;
    
    /* Map */
    --map-height: 300px;
    
    
    /* ========================================
       15. BREAKPOINTS (for reference)
       ======================================== */
    
    /* Note: CSS custom properties can't be used in media queries,
       but these are documented here for reference and JS usage */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1600px;
    --breakpoint-3xl: 2200px;
    
    
    /* ========================================
       16. ANIMATION VALUES
       ======================================== */
    
    /* Delays */
    --animation-delay-1: 0.1s;
    --animation-delay-2: 0.2s;
    --animation-delay-3: 0.3s;
    --animation-delay-4: 0.4s;
    
    /* Durations */
    --animation-duration-fast: 0.3s;
    --animation-duration-normal: 0.8s;
    --animation-duration-slow: 1s;
    
    /* Distances */
    --animation-distance-sm: 10px;
    --animation-distance-md: 20px;
    --animation-distance-lg: 30px;
}


/* ============================================
   RESPONSIVE TOKEN OVERRIDES
   ============================================ */

/* Large Screens / 4K */
@media (min-width: 1600px) {
    :root {
        --font-size-base: 1.125rem; /* 18px */
        --container-max-width: 1400px;
    }
}

@media (min-width: 2200px) {
    :root {
        --font-size-base: 1.25rem; /* 20px */
        --container-max-width: 1500px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --space-section: 4rem;
        --font-size-h1: 2rem;
        --font-size-h2: 1.75rem;
    }
}

@media (max-width: 576px) {
    :root {
        --space-container: 15px;
        --card-padding: 2rem;
    }
}