/**
 * CSS Custom Properties (Variables) for Komoot Routes Display.
 */

:root {
    /* Colors - Difficulty Levels */
    --komoot-color-leicht-strong: #15803D;
    --komoot-color-leicht-light: #DCFCE7;
    --komoot-color-mittel-strong: #A16207;
    --komoot-color-mittel-light: #FEF9C3;
    --komoot-color-schwer-strong: #B91C1C;
    --komoot-color-schwer-light: #FEE2E2;

    /* Colors - UI */
    --komoot-color-banner-default: #EA580C;
    --komoot-color-border: #e2e8f0;
    --komoot-color-border-hover: #aab7c4;
    --komoot-color-text-primary: #1A1A1A;
    --komoot-color-text-secondary: #5f6368;
    --komoot-color-text-muted: #737373;
    --komoot-color-background-light: #F9FAFB;

    /* Colors - Stage badges */
    --komoot-color-badge-start: #65a30d;
    --komoot-color-badge-waypoint: #777;
    --komoot-color-badge-goal: #b91c1c;

    /* Spacing */
    --komoot-spacing-xs: 4px;
    --komoot-spacing-sm: 8px;
    --komoot-spacing-md: 12px;
    --komoot-spacing-lg: 20px;
    --komoot-spacing-xl: 24px;

    /* Border Radius */
    --komoot-radius-sm: 5px;
    --komoot-radius-md: 14px;
    --komoot-radius-lg: 15px;

    /* Shadows */
    --komoot-shadow-card: 0 2px 12px rgba(0, 0, 0, .08);
    --komoot-shadow-card-hover: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);

    /* Transitions */
    --komoot-transition-fast: .2s;

    /* Breakpoints */
    --komoot-breakpoint-mobile: 767px;
    --komoot-breakpoint-tablet: 1024px;
}