/* ============================================
   DingsDa Design System — CSS Variables
   ============================================ */

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Segoe Fluent Icons';
    src: url('/fonts/SegoeFluentIcons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.fi {
    font-family: 'Segoe Fluent Icons';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

:root {
    --font-primary: 'Poppins', sans-serif;

    /* --- Primär: Blau --- */
    --color-blue-50:  #E6F1FB;
    --color-blue-100: #B5D4F4;
    --color-blue-200: #85B7EB;
    --color-blue-400: #3b82c4;
    --color-blue-600: #185FA5;
    --color-blue-800: #0C447C;
    --color-blue-900: #042C53;

    /* --- Sekundär: Grün --- */
    --color-green-50:  #E1F5EE;
    --color-green-100: #9FE1CB;
    --color-green-200: #5DCAA5;
    --color-green-400: #1D9E75;
    --color-green-600: #0F6E56;
    --color-green-800: #085041;
    --color-green-900: #04342C;

    /* --- Akzent: Lila --- */
    --color-purple-50:  #EEEDFE;
    --color-purple-100: #CECBF6;
    --color-purple-200: #AFA9EC;
    --color-purple-400: #7F77DD;
    --color-purple-600: #534AB7;
    --color-purple-800: #3C3489;
    --color-purple-900: #26215C;

    /* --- Warn: Amber --- */
    --color-amber-50:  #FAEEDA;
    --color-amber-100: #FAC775;
    --color-amber-200: #EF9F27;
    --color-amber-400: #BA7517;
    --color-amber-600: #854F0B;
    --color-amber-800: #633806;
    --color-amber-900: #412402;

    /* --- Status: Rosa --- */
    --color-pink-50:  #FBEAF0;
    --color-pink-100: #F4C0D1;
    --color-pink-200: #ED93B1;
    --color-pink-400: #D4537E;
    --color-pink-600: #993556;
    --color-pink-800: #72243E;
    --color-pink-900: #4B1528;

    /* --- Neutral: Grau --- */
    --color-gray-50:  #F1EFE8;
    --color-gray-100: #D3D1C7;
    --color-gray-200: #B4B2A9;
    --color-gray-400: #888780;
    --color-gray-600: #5F5E5A;
    --color-gray-800: #444441;
    --color-gray-900: #2C2C2A;

    --danger: #D4537E;
}

/* ============================================
   LIGHT MODE (Standard)
   ============================================ */
:root,
[data-theme="light"] {
    --bg-app:      #F5F7FA;
    --bg-surface:  #FFFFFF;
    --bg-card:     #EEF1F6;
    --bg-elevated: #E4E8F0;
    --bg-border:   #D0D6E2;

    --text-primary:   #111827;
    --text-secondary: #4B5563;
    --text-tertiary:  #9CA3AF;
    --text-disabled:  #D0D6E2;

    --accent-primary:        var(--color-blue-600);
    --accent-primary-hover:  var(--color-blue-400);
    --accent-primary-light:  var(--color-blue-50);
    --accent-primary-border: var(--color-blue-100);

    --accent-secondary:        var(--color-green-400);
    --accent-secondary-hover:  var(--color-green-600);
    --accent-secondary-light:  var(--color-green-50);
    --accent-secondary-border: var(--color-green-100);

    --brand-d1: var(--color-blue-600);
    --brand-d2: var(--color-green-400);

    --scrollbar-thumb:       #C2C9D6;
    --scrollbar-thumb-hover: #A7B0C0;

    --shadow-card: 0 1px 2px rgba(17,24,39,0.04), 0 4px 12px rgba(17,24,39,0.06);
}

/* ============================================
   DARK MODE
   ============================================ */
[data-theme="dark"] {
    --bg-app:      #0f1117;
    --bg-surface:  #161b25;
    --bg-card:     #1e2535;
    --bg-elevated: #262e42;
    --bg-border:   #2e384f;

    --text-primary:   #E8EAF0;
    --text-secondary: #9AA0B2;
    --text-tertiary:  #5A6070;
    --text-disabled:  #2e384f;

    --accent-primary:        var(--color-blue-400);
    --accent-primary-hover:  var(--color-blue-200);
    --accent-primary-light:  var(--color-blue-800);
    --accent-primary-border: var(--color-blue-600);

    --accent-secondary:        var(--color-green-400);
    --accent-secondary-hover:  var(--color-green-200);
    --accent-secondary-light:  var(--color-green-800);
    --accent-secondary-border: var(--color-green-600);

    --brand-d1: var(--color-blue-400);
    --brand-d2: var(--color-green-400);

    --scrollbar-thumb:       #2e384f;
    --scrollbar-thumb-hover: #3f4d6b;

    --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.35);
}

/* ============================================
   SYSTEM PREFERENCE — wenn kein data-theme gesetzt
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg-app:      #0f1117;
        --bg-surface:  #161b25;
        --bg-card:     #1e2535;
        --bg-elevated: #262e42;
        --bg-border:   #2e384f;

        --text-primary:   #E8EAF0;
        --text-secondary: #9AA0B2;
        --text-tertiary:  #5A6070;
        --text-disabled:  #2e384f;

        --accent-primary:        var(--color-blue-400);
        --accent-primary-hover:  var(--color-blue-200);
        --accent-primary-light:  var(--color-blue-800);
        --accent-primary-border: var(--color-blue-600);

        --accent-secondary:        var(--color-green-400);
        --accent-secondary-hover:  var(--color-green-200);
        --accent-secondary-light:  var(--color-green-800);
        --accent-secondary-border: var(--color-green-600);

        --brand-d1: var(--color-blue-400);
        --brand-d2: var(--color-green-400);

        --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.35);
    }
}