/* Colors CSS – Light Design wie seo-day.de (www.seo-day.de/css/app/base/colors.css) */

:root {
    /* Logo-Markenfarben (seo-day.de) */
    --color-orange: #f39324;
    --color-teal: #1c7a7e;

    /* Primär Orange für Job-UI / CTAs; Navigation-Hover nutzt Teal (--color-teal) */
    --color-primary: #f39324;
    --color-primary-light: #f5a623;
    --color-primary-dark: #e88a1f;
    --color-primary-glow: rgba(243, 147, 36, 0.35);

    /* Sekundär Teal (Navigation, Links wie seo-day.de) */
    --color-secondary: #1c7a7e;
    --color-secondary-light: #239196;
    --color-secondary-dark: #155b5e;
    --color-secondary-glow: rgba(28, 122, 126, 0.25);

    /* Accent */
    --color-accent: #f39324;
    --color-accent-light: #f5a623;
    --color-accent-dark: #e88a1f;
    --color-accent-purple: #9c27b0;
    --color-accent-pink: #e91e63;
    --color-marker: #1f89de;

    /* Surfaces – helles Layout */
    --color-background: #ffffff;
    --color-background-elevated: #ffffff;
    --color-surface: #ffffff;
    --color-surface-glass: rgba(255, 255, 255, 0.9);
    --color-surface-glass-hover: rgba(255, 255, 255, 0.95);
    --color-surface-elevated: #f8f8f8;
    --color-surface-hover: #f5f5f5;
    --color-surface-active: #f0f0f0;
    --color-bg-light: #f8f8f8;
    --color-bg-lighter: #f5f5f5;

    /* Header (Glas) / Footer (schwarz wie seo-day.de) */
    --color-header-navigation-bg: rgba(255, 255, 255, 0.84);
    --color-footer-bg: #000000;
    --color-footer-text: #ffffff;
    --color-flag-black: #000000;
    --color-flag-red: #dd0000;
    --color-flag-gold: #ffcc00;

    /* Text */
    --color-text-primary: #000000;
    --color-text-secondary: #4a4a4a;
    --color-text-tertiary: #6c757d;
    --color-text-on-primary: #ffffff;
    --color-text-on-secondary: #ffffff;
    --color-text-on-accent: #ffffff;
    --color-text-muted: #6c757d;

    /* Borders */
    --color-border: #e0e0e0;
    --color-border-light: #e8e8e8;
    --color-border-medium: #d0d0d0;
    --color-border-strong: #c0c0c0;
    --color-border-glow: rgba(28, 122, 126, 0.2);
    --color-border-rgb: 224, 224, 224;

    /* Status */
    --color-success: #10b981;
    --color-success-bg: rgba(16, 185, 129, 0.1);
    --color-warning: #fbbf24;
    --color-warning-bg: rgba(251, 191, 36, 0.1);
    --color-info: #1c7a7e;
    --color-info-bg: rgba(28, 122, 126, 0.1);
    --color-error: #ef4444;
    --color-error-dark: #dc2626;
    --color-error-bg: rgba(239, 68, 68, 0.1);

    /* Glas / Elevation (seo-day.de) */
    --glass-blur-header: 12px;
    --glass-blur-surface: 6px;
    --glass-header-bg: rgba(255, 255, 255, 0.84);
    --glass-surface-bg: rgba(255, 255, 255, 0.9);
    --glass-border-highlight: rgba(255, 255, 255, 0.72);
    --glass-border-edge: rgba(28, 122, 126, 0.1);
    --glass-bg: var(--glass-surface-bg);
    --glass-border: var(--glass-border-edge);
    --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    --glass-backdrop-blur: blur(12px);

    --shadow-header-bar: 0 1px 0 rgba(28, 122, 126, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-elevation-surface: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 18px rgba(28, 122, 126, 0.06);
    --shadow-elevation-surface-hover: 0 4px 14px rgba(0, 0, 0, 0.07), 0 8px 22px rgba(243, 147, 36, 0.1);
    --surface-shadow-glass: var(--shadow-elevation-surface), inset 0 1px 0 var(--glass-border-highlight);
    --shadow-overlay-panel: 0 4px 20px rgba(0, 0, 0, 0.07), 0 8px 28px rgba(28, 122, 126, 0.06);

    --shimmer-color: rgba(243, 147, 36, 0.08);
    --glow-primary: 0 0 16px rgba(243, 147, 36, 0.2);
    --glow-secondary: 0 0 16px rgba(28, 122, 126, 0.2);
    --glow-accent: 0 0 16px rgba(243, 147, 36, 0.2);

    --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-large: 0 8px 28px rgba(0, 0, 0, 0.1);
    --shadow-elevated: var(--shadow-elevation-surface);
    --shadow-elevated-hover: var(--shadow-elevation-surface-hover);
    --shadow-ambient: 0 0 40px rgba(28, 122, 126, 0.06);

    --border-radius: 16px;
    --border-radius-small: 8px;
    --border-radius-large: 24px;
    --border-radius-xl: 32px;

    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease-in-out;
    --transition-slow: all 0.5s ease-in-out;
    --transition-glass: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    --color-primary-rgb: 243, 147, 36;
    --color-secondary-rgb: 28, 122, 126;
    --color-accent-rgb: 243, 147, 36;
    --color-error-rgb: 239, 68, 68;

    --color-code-bg: #f5f5f5;
    --color-code-text: #333333;

    /* API-Dokumentation: eigene Dark-Palette (nur API-Screen) */
    --color-api-documentation-section-bg: #0d1117;
    --color-api-documentation-text-primary: #f0f4f8;
    --color-api-documentation-text-secondary: #c9d1d9;
    --color-api-documentation-text-tertiary: #9da7b2;
    --color-api-documentation-text-muted: #7d8794;
    --color-api-documentation-text-on-primary: #ffffff;
    --color-api-documentation-text-on-secondary: #041014;
    --color-api-documentation-primary: #ff8c42;
    --color-api-documentation-primary-light: #ffb366;
    --color-api-documentation-primary-dark: #e6731a;
    --color-api-documentation-secondary: #4dd0e1;
    --color-api-documentation-secondary-light: #80deea;
    --color-api-documentation-secondary-dark: #0097a7;
    --color-api-documentation-border: #30363d;
    --color-api-documentation-border-light: #21262d;
    --color-api-documentation-border-medium: #3d444d;
    --color-api-documentation-surface-card: #161b22;
    --color-api-documentation-surface-muted: #21262d;
    --color-api-documentation-table-surface: #161b22;
    --color-api-documentation-row-bg: #0f1318;
    --color-api-documentation-row-hover: #1c222b;
    --color-api-documentation-code-bg: #1e2430;
    --color-api-documentation-code-text: #e6edf3;

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

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
}