/**
 * NORDticker Design System Variables
 *
 * Centralized design tokens for consistent styling across the theme.
 *
 * @package NORDticker
 */

:root {
    /* ========================================================================
       COLORS - Brand & UI
       ======================================================================== */

    /* Primary Brand Colors */
    --nt-primary: #0f4c81;
    --nt-primary-light: #1a5d9a;
    --nt-primary-dark: #0b3a62;
    --nt-primary-rgb: 15, 76, 129;

    /* Secondary Accent */
    --nt-accent: #ff7b54;
    --nt-accent-light: #ff9473;
    --nt-accent-dark: #e66948;

    /* Neutral Grays */
    --nt-gray-50: #f9fafb;
    --nt-gray-100: #f3f4f6;
    --nt-gray-200: #e5e7eb;
    --nt-gray-300: #d1d5db;
    --nt-gray-400: #9ca3af;
    --nt-gray-500: #6b7280;
    --nt-gray-600: #4b5563;
    --nt-gray-700: #374151;
    --nt-gray-800: #1f2937;
    --nt-gray-900: #111827;

    /* Semantic Colors */
    --nt-success: #10b981;
    --nt-warning: #f59e0b;
    --nt-error: #ef4444;
    --nt-info: #06b6d4;

    /* Background Colors */
    --nt-bg-primary: #ffffff;
    --nt-bg-secondary: #f6f9ff;
    --nt-bg-muted: #f9fafb;

    /* Text Colors */
    --nt-text-primary: #111827;
    --nt-text-secondary: #4a5568;
    --nt-text-muted: #6b7280;
    --nt-text-inverse: #ffffff;

    /* Border Colors */
    --nt-border-light: rgba(15, 44, 74, 0.08);
    --nt-border-medium: rgba(15, 44, 74, 0.15);
    --nt-border-dark: rgba(15, 44, 74, 0.25);

    /* ========================================================================
       CATEGORY COLORS
       ======================================================================== */

    /* Familie & Community - Green */
    --nt-cat-familie-start: #a7f3d0;
    --nt-cat-familie-end: #d1fae5;
    --nt-cat-familie-icon: #10b981;

    /* Feste & Märkte - Orange */
    --nt-cat-feste-start: #fde68a;
    --nt-cat-feste-end: #fef3c7;
    --nt-cat-feste-icon: #f59e0b;

    /* Kunst, Kultur & Wissen - Purple */
    --nt-cat-kunst-start: #ddd6fe;
    --nt-cat-kunst-end: #ede9fe;
    --nt-cat-kunst-icon: #8b5cf6;

    /* Musik & Bühne - Red */
    --nt-cat-musik-start: #fecaca;
    --nt-cat-musik-end: #fee2e2;
    --nt-cat-musik-icon: #ef4444;

    /* Party & Nachtleben - Pink */
    --nt-cat-party-start: #fbcfe8;
    --nt-cat-party-end: #fce7f3;
    --nt-cat-party-icon: #ec4899;

    /* Sport & Aktiv - Cyan */
    --nt-cat-sport-start: #a5f3fc;
    --nt-cat-sport-end: #cffafe;
    --nt-cat-sport-icon: #06b6d4;

    /* ========================================================================
       TYPOGRAPHY
       ======================================================================== */

    /* Font Families */
    --nt-font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --nt-font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

    /* Font Sizes */
    --nt-text-xs: 0.75rem;      /* 12px */
    --nt-text-sm: 0.875rem;     /* 14px */
    --nt-text-base: 1rem;       /* 16px */
    --nt-text-lg: 1.125rem;     /* 18px */
    --nt-text-xl: 1.25rem;      /* 20px */
    --nt-text-2xl: 1.5rem;      /* 24px */
    --nt-text-3xl: 1.875rem;    /* 30px */
    --nt-text-4xl: 2.25rem;     /* 36px */
    --nt-text-5xl: 3rem;        /* 48px */

    /* Font Weights */
    --nt-weight-normal: 400;
    --nt-weight-medium: 500;
    --nt-weight-semibold: 600;
    --nt-weight-bold: 700;

    /* Line Heights */
    --nt-leading-tight: 1.25;
    --nt-leading-normal: 1.5;
    --nt-leading-relaxed: 1.75;
    --nt-leading-loose: 2;

    /* ========================================================================
       SPACING SCALE
       ======================================================================== */

    --nt-space-1: 0.25rem;   /* 4px */
    --nt-space-2: 0.5rem;    /* 8px */
    --nt-space-3: 0.75rem;   /* 12px */
    --nt-space-4: 1rem;      /* 16px */
    --nt-space-5: 1.25rem;   /* 20px */
    --nt-space-6: 1.5rem;    /* 24px */
    --nt-space-8: 2rem;      /* 32px */
    --nt-space-10: 2.5rem;   /* 40px */
    --nt-space-12: 3rem;     /* 48px */
    --nt-space-16: 4rem;     /* 64px */
    --nt-space-20: 5rem;     /* 80px */

    /* ========================================================================
       BORDER RADIUS
       ======================================================================== */

    --nt-radius-sm: 0.375rem;   /* 6px */
    --nt-radius-md: 0.5rem;     /* 8px */
    --nt-radius-lg: 0.75rem;    /* 12px */
    --nt-radius-xl: 1rem;       /* 16px */
    --nt-radius-pill: 999px;    /* Full rounded */

    /* ========================================================================
       SHADOWS
       ======================================================================== */

    --nt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --nt-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --nt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --nt-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12);
    --nt-shadow-xl: 0 12px 25px rgba(0, 0, 0, 0.15);
    --nt-shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.18);

    /* Colored Shadows */
    --nt-shadow-primary: 0 4px 12px rgba(var(--nt-primary-rgb), 0.25);
    --nt-shadow-primary-lg: 0 8px 20px rgba(var(--nt-primary-rgb), 0.3);
    --nt-shadow-accent: 0 4px 12px rgba(255, 123, 84, 0.25);

    /* ========================================================================
       TRANSITIONS
       ======================================================================== */

    --nt-transition-fast: 0.15s ease;
    --nt-transition-base: 0.2s ease;
    --nt-transition-slow: 0.3s ease;
    --nt-transition-slowest: 0.4s ease;

    /* ========================================================================
       Z-INDEX SCALE
       ======================================================================== */

    --nt-z-base: 1;
    --nt-z-dropdown: 100;
    --nt-z-sticky: 200;
    --nt-z-fixed: 300;
    --nt-z-modal-backdrop: 400;
    --nt-z-modal: 500;
    --nt-z-popover: 600;
    --nt-z-tooltip: 700;
    --nt-z-toast: 1000;

    /* ========================================================================
       LAYOUT
       ======================================================================== */

    --nt-container-sm: 640px;
    --nt-container-md: 768px;
    --nt-container-lg: 1024px;
    --nt-container-xl: 1280px;

    --nt-content-max-width: 900px;
    --nt-grid-gap: var(--nt-space-6);

    /* ========================================================================
       BREAKPOINTS (for reference in media queries)
       ======================================================================== */

    /* These can't be used directly in @media, but document our breakpoints */
    --nt-breakpoint-sm: 640px;
    --nt-breakpoint-md: 768px;
    --nt-breakpoint-lg: 1024px;
    --nt-breakpoint-xl: 1280px;
}