:root {
    --primary-color: #0e4194;
    --primary-rgb: 14, 65, 148;
    --primary-dark: #1e3a8a;
    --primary-light: #3b82f6;
    --secondary-color: #fbc831;
    --third-color: #003e65;
    --accent-color: #dc3010;

    --hoverprimary-color: #030e23;
    --hoverprimary-rgb: 3, 14, 35;
    --hoversecondary-color: #8f6c1a;
    --hoverthird-color: #03304c;
    --hoveraccent-color: #98220c;

    /* Default to light mode (no dark mode) */
    --neutrals-0: white;
    --neutrals-10: #e1e0e0;
    --neutrals-100: #939393;
    --neutrals-500: #030E23;

    /* Text colors for light mode */
    --textcolor-fullcontrast: #030E23;
    --textcolor-80contrast: #333333;
    --textcolor-50contrast: #666666;
    --textcolor-10contrast: #939393;

    --textcolor-fullcontrast-onsecondary: white;

    /* Signal colors */
    --signals-activecolor: #2ecc71; /* Green for active */
    --hoversignals-activecolor: #27ae60;
    --signals-successcolor: #10b981;
    --signals-inactivecolor: var(--accent-color);
    --signals-indevelopmentcolor: orange;

    /* Shared gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    --gradient-primary-90: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-dark) 100%);

    /* Border radius scale */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-pill: 999px;

    /* Spacing scale */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;

    /* Surface colors (for backgrounds, borders, cards) */
    --surface-bg: #f8f9fa;
    --surface-border: #dee2e6;
    --surface-border-light: #e5e7eb;
    --surface-hover: #f3f4f6;

    /* Primary tint (very light primary-blue for subtle highlights) */
    --primary-tint: #f0f4ff;

    /* Slate scale — kühle Neutrals für Text & Flächen */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;

    /* Gray scale — neutrale Grautöne (wärmer als slate) */
    --gray-300: #d1d5db;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;

    /* Status: error */
    --error-50:  #fef2f2;
    --error-100: #fee2e2;
    --error-200: #fecaca;
    --error-500: #ef4444;
    --error-600: #dc2626;
    --error-800: #991b1b;

    /* Status: success */
    --success-50:  #f0fdf4;
    --success-100: #dcfce7;
    --success-200: #a7f3d0;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-800: #166534;
    --success-900: #065f46;

    /* Status: warning */
    --warning-50:  #fffbeb;
    --warning-200: #fde68a;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-800: #92400e;

    /* Semantic RGB-companion tokens for alpha-blending
       (STYLE_GUIDE §1.1, Phase 3d-1) */
    --success-rgb:   34, 197, 94;     /* = --success-500 */
    --error-rgb:     239, 68, 68;     /* = --error-500 */
    --warning-rgb:   245, 158, 11;    /* = --warning-500 */
    --slate-200-rgb: 226, 232, 240;   /* = --slate-200 */
    --slate-400-rgb: 148, 163, 184;   /* = --slate-400 */
    --slate-600-rgb: 71, 85, 105;     /* = --slate-600 */
    --neutrals-0-rgb: 255, 255, 255;  /* = --neutrals-0 (white) */

    /* Phase 3d-3 — weitere -rgb-Companions für tensile-Pilot */
    --accent-rgb:               220, 48, 16;     /* = --accent-color #dc3010 */
    --signals-successcolor-rgb: 16, 185, 129;    /* = --signals-successcolor #10b981 */
    --success-600-rgb:          22, 163, 74;     /* = --success-600 */
    --warning-600-rgb:          217, 119, 6;     /* = --warning-600 */
}
/* Opacity Classes */
.opacity-05 {
    opacity: 0.5;
}

.opacity-08 {
    opacity: 0.8;
}

/* Main Color Classes */
.primarycolor {
    color: var(--primary-color);
}
.primarycolor-onbackgrund {
    background-color: var(--primary-color);
    color: white;
}

.secondarycolor {
    color: var(--secondary-color);
}
.secondarycolor-onbackground {
    background-color: var(--secondary-color);
}

.thirdcolor {
    color: var(--third-color);
}
.thirdcolor-onbackground {
    background-color: var(--third-color);
    color: white;
}

.accentcolor {
    color: var(--accent-color);
}
.accentcolor-onbackground {
    background-color: var(--accent-color);
}

/* Signal Color Classes */
.activecolor {
    color: var(--signals-activecolor);
}
.activecolor-onbackground {
    background-color: var(--signals-activecolor);
}

.inactivecolor {
    color: var(--signals-inactivecolor);
}
.inactivecolor-onbackground {
    background-color: var(--signals-inactivecolor);
}

.indevelopmentcolor {
    color: var(--signals-indevelopmentcolor);
}
.indevelopmentcolor-onbackground {
    background-color: var(--signals-indevelopmentcolor);
}

/* Neutral Color Classes */
.neutral0color {
    color: var(--neutrals-0);
}
.neutral0color-onbackground {
    background-color: var(--neutrals-0);
}

.neutral10color {
    color: var(--neutrals-10);
}
.neutral10color-onbackground {
    background-color: var(--neutrals-10);
}

.neutral100color {
    color: var(--neutrals-100);
}
.neutral100color-onbackground {
    background-color: var(--neutrals-100);
}

.neutral500color {
    color: var(--neutrals-500);
}
.neutral500color-onbackground {
    background-color: var(--neutrals-500);
}

/* text color classes */
.textcolor-fullcontrast {
    color: var(--textcolor-fullcontrast);
}

.textcolor-fullcontrast-onsecondary {
    color: var(--textcolor-fullcontrast-onsecondary);
}

.textcolor-80contrast {
    color: var(--textcolor-80contrast);
}

.textcolor-50contrast {
    color: var(--textcolor-50contrast);
}

.textcolor-10contrast {
    color: var(--textcolor-10contrast);
}