/* CSS-Variablen — Executive Dark Mode */
/* CIS Controls Platform — Design System 2.0 */

:root {
    --color-surface:                   #111319;
    --color-surface-dim:               #111319;
    --color-surface-bright:            #373940;
    --color-surface-container-lowest:  #0c0e14;
    --color-surface-container-low:     #191b22;
    --color-surface-container:         #1d1f26;
    --color-surface-container-high:    #282a30;
    --color-surface-container-highest: #33343b;
    --color-on-surface:                #e2e2eb;
    --color-on-surface-variant:        #c3c6d5;
    --color-inverse-surface:           #e2e2eb;
    --color-inverse-on-surface:        #2e3037;
    --color-outline:                   #8d909e;
    --color-outline-variant:           #434653;
    --color-surface-tint:              #b1c5ff;

    --color-primary:             #b1c5ff;
    --color-on-primary:          #002c70;
    --color-primary-container:   #0047ab;
    --color-on-primary-container:#a5bdff;
    --color-inverse-primary:     #2559bd;

    --color-secondary:             #b7c8e1;
    --color-on-secondary:          #213145;
    --color-secondary-container:   #3a4a5f;
    --color-on-secondary-container:#a9bad3;

    --color-tertiary:              #ffb59a;
    --color-on-tertiary:           #5b1b00;
    --color-tertiary-container:    #8b2e01;
    --color-on-tertiary-container: #ffaa8a;

    --color-error:             #ffb4ab;
    --color-on-error:          #690005;
    --color-error-container:   #93000a;
    --color-on-error-container:#ffdad6;

    --color-bg-default:  #111319;   /* was #000000  → surface */
    --color-bg-canvas:   #0c0e14;   /* was #030508  → surface-container-lowest */
    --color-bg-subtle:   #191b22;   /* was #050a10  → surface-container-low */
    --color-bg-muted:    #1d1f26;   /* was #0a1018  → surface-container */
    --color-bg-emphasis: #33343b;   /* was #4a5a6a  → surface-container-highest */

    --color-surface-overlay: #191b22;  /* was #050a10 */
    --color-surface-inset:   #0c0e14;  /* was #000000 */
    --color-surface-raised:  #1d1f26;  /* was #0a1018 */

    --color-border-default: #434653;                /* outline-variant — solid, visible */
    --color-border-muted:   rgba(67, 70, 83, 0.6);
    --color-border-subtle:  rgba(67, 70, 83, 0.35);

    --color-text-primary:   #e2e2eb;  /* was #9ba5b0 (FAIL ~3.9:1) → 13.1:1 */
    --color-text-secondary: #c3c6d5;  /* was #9ba5b0 → on-surface-variant → 9.6:1 */
    --color-text-tertiary:  #8d909e;  /* was #7a8ca0 → outline → 5.0:1 */
    --color-text-link:      #b1c5ff;  /* was #4a8fc4 → primary */
    --color-text-link-hover:#a5bdff;  /* was #5a9fd4 → on-primary-container */

    --color-accent-primary:   #0047ab;  /* primary-container — royal blue, visible CTA */
    --color-accent-secondary: #3a4a5f;  /* secondary-container */
    --color-accent-emphasis:  #8b2e01;  /* tertiary-container */
    --color-accent-highlight: #282a30;  /* surface-container-high */

    --color-container-bg:    #191b22;  /* was #030508 */
    --color-container-hover: #1d1f26;  /* was #050a10 */

    --color-interactive-primary:   #b1c5ff;  /* was #4a8fc4 → primary */
    --color-interactive-secondary: #a9bad3;  /* was #3a7aa8 → on-secondary-container */
    --color-interactive-emphasis:  #a5bdff;  /* was #5a9fd4 → on-primary-container */

    --color-success:          #52c97f;  /* was #2d7a3f (fail 2.5:1) → 8.6:1 */
    --color-success-emphasis: #1e4d35;
    --color-warning:          #e8a838;  /* was #9d7520 (fail 2.6:1) → 7.1:1 */
    --color-warning-emphasis: #4d3510;
    --color-danger:           #ffb4ab;  /* was #b83a37 (fail 3.8:1) → 10.4:1 */
    --color-danger-emphasis:  #93000a;  /* was #8e2d2a */
    --color-info:             #b1c5ff;  /* was #3d7fc4 (fail 3.3:1) → primary */
    --color-info-emphasis:    #0047ab;

    --glass-bg:       rgba(17, 19, 25, 0.72);
    --glass-border:   rgba(67, 70, 83, 0.55);
    --glass-backdrop: blur(30px);

    --shadow-small:  0  2px  8px rgba(12, 14, 20, 0.40);  /* was opacity 0.90 pure black */
    --shadow-medium: 0  4px 16px rgba(12, 14, 20, 0.40);  /* was opacity 0.95 */
    --shadow-large:  0  8px 32px rgba(12, 14, 20, 0.40);  /* was opacity 1.00 */
    --shadow-xlarge: 0 16px 48px rgba(12, 14, 20, 0.40);  /* was opacity 1.00 */
    --shadow-inset:  inset 0 2px 4px rgba(12, 14, 20, 0.30);

    --space-xs:  0.5rem;   /*  8px — was 4px */
    --space-sm:  1rem;     /* 16px — was 8px */
    --space-md:  1.5rem;   /* 24px — was 16px */
    --space-lg:  2.5rem;   /* 40px — was 24px */
    --space-xl:  4rem;     /* 64px — was 32px */
    --space-2xl: 3rem;     /* 48px — kept for layout compat */
    --space-3xl: 5rem;     /* 80px — kept for layout compat */

    --font-family-base: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;

    --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:  2rem;      /* 32px */
    --font-size-4xl:  2.5rem;    /* 40px */

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

    --line-height-tight:   1.2;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.75;

    --type-headline-xl-size:   2.5rem;  /* 40px/700, lh:48px, ls:-0.02em */
    --type-headline-xl-weight: 700;
    --type-headline-xl-lh:     3rem;
    --type-headline-xl-ls:     -0.02em;

    --type-headline-lg-size:   2rem;    /* 32px/600, lh:40px, ls:-0.01em */
    --type-headline-lg-weight: 600;
    --type-headline-lg-lh:     2.5rem;
    --type-headline-lg-ls:     -0.01em;

    --type-headline-md-size:   1.5rem;  /* 24px/600, lh:32px */
    --type-headline-md-weight: 600;
    --type-headline-md-lh:     2rem;

    --type-label-md-size:   0.75rem;    /* 12px/600, lh:16px, ls:+0.05em, uppercase */
    --type-label-md-weight: 600;
    --type-label-md-lh:     1rem;
    --type-label-md-ls:     0.05em;

    --radius-sm:   2px;      /* design: sm */
    --radius-md:   4px;      /* design: DEFAULT — was 3px */
    --radius-lg:   8px;      /* design: lg — was 4px */
    --radius-xl:   12px;     /* design: xl — was 6px */
    --radius-full: 9999px;   /* design: full — was 3px (FIXED: pill shapes now work) */

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms linear;
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    --z-dropdown:       1000;
    --z-sticky:         1020;
    --z-fixed:          1030;
    --z-modal-backdrop: 1040;
    --z-modal:          1050;
    --z-popover:        1060;
    --z-tooltip:        1070;

    --sidebar-width:     280px;
    --header-height:     80px;
    --content-max-width: 1400px;

    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
    --ease-in:     cubic-bezier(0.4, 0, 1, 1);

    --priority-critical: #ffb4ab;  /* was #b83a37 */
    --priority-high:     #e8a838;  /* was #9d7520 */
    --priority-medium:   #b1c5ff;  /* was #4a8fc4 */
    --priority-low:      #8d909e;  /* was #6a7a8a */

    --status-not-started: #8d909e;
    --status-in-progress: #b1c5ff;
    --status-completed:   #52c97f;
    --status-blocked:     #ffb4ab;
}

/* Basis — umgebender Flächenfarbton */

body {
    background:
/* radial-gradient(circle at 20% 50%, rgba(177, 197, 255, 0.03) 0%, transparent 50%), */
/* radial-gradient(circle at 80% 80%, rgba(177, 197, 255, 0.02) 0%, transparent 50%), */
        var(--color-bg-default);
}

/* Responsive Haltepunkte */

:root {
    --breakpoint-sm:  640px;
    --breakpoint-md:  768px;
    --breakpoint-lg:  1024px;
    --breakpoint-xl:  1280px;
    --breakpoint-2xl: 1536px;
}

/* Barrierefreiheit */

:focus-visible {
    outline: 2px solid var(--color-interactive-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(177, 197, 255, 0.15);
}

::selection {
    background: rgba(177, 197, 255, 0.20);
    color: var(--color-text-primary);
}

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

@media (prefers-contrast: high) {
    :root {
        --color-border-default:  var(--color-primary);
        --color-text-secondary:  var(--color-on-surface);
        --color-bg-subtle:       var(--color-surface-container);
    }
}

/* Druckoptimierung */

@media print {
    :root {
        --color-bg-default:     #ffffff;
        --color-bg-canvas:      #ffffff;
        --color-text-primary:   #000000;
        --color-text-secondary: #333333;
    }

    body {
        background: #ffffff !important;
    }
}

/* Responsive */

@media (max-width: 768px) {
    body {
        background: var(--color-bg-default);
    }
}