/* ============================================================
   OMNIA Design Tokens
   Zentrale Design-Variablen fuer das gesamte System
   ============================================================ */

/* --- Inter Font (self-hosted, DSGVO-konform) --- */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- Design Tokens (Light Mode) --- */
:root {
    /* ---- Primaerfarben (Healthcare-Teal) ---- */
    --color-primary-50:  #eef7f7;
    --color-primary-100: #d5eded;
    --color-primary-200: #a8d8d8;
    --color-primary-300: #6bbfbf;
    --color-primary-400: #3da8a8;
    --color-primary-500: #1a8f8f;
    --color-primary-600: #157575;
    --color-primary-700: #105b5b;
    --color-primary-800: #0b4242;
    --color-primary-900: #062929;

    /* Rueckwaertskompatibel */
    --color-primary:       var(--color-primary-500);
    --color-primary-dark:  var(--color-primary-600);
    --color-primary-light: var(--color-primary-300);
    --color-primary-bg:    var(--color-primary-50);

    /* ---- Akzentfarbe (Warm Coral) ---- */
    --color-accent-500: #E07A5F;
    --color-accent-600: #C96A52;

    /* ---- Neutrale Farben (warmes Grau) ---- */
    --color-neutral-50:  #FAFAF9;
    --color-neutral-100: #F5F5F4;
    --color-neutral-200: #E7E5E4;
    --color-neutral-300: #D6D3D1;
    --color-neutral-400: #A8A29E;
    --color-neutral-500: #78716C;
    --color-neutral-600: #57534E;
    --color-neutral-700: #44403C;
    --color-neutral-800: #292524;
    --color-neutral-900: #1C1917;

    /* Rueckwaertskompatibel (gray -> neutral) */
    --color-white:    #ffffff;
    --color-gray-50:  var(--color-neutral-50);
    --color-gray-100: var(--color-neutral-100);
    --color-gray-200: var(--color-neutral-200);
    --color-gray-300: var(--color-neutral-300);
    --color-gray-400: var(--color-neutral-400);
    --color-gray-500: var(--color-neutral-500);
    --color-gray-600: var(--color-neutral-600);
    --color-gray-700: var(--color-neutral-700);
    --color-gray-800: var(--color-neutral-800);
    --color-gray-900: var(--color-neutral-900);

    /* ---- Semantische Farben ---- */
    --color-success:    #059669;
    --color-success-bg: #ECFDF5;
    --color-warning:    #D97706;
    --color-warning-bg: #FFFBEB;
    --color-error:      #DC2626;
    --color-error-bg:   #FEF2F2;
    --color-info:       #0284C7;
    --color-info-bg:    #F0F9FF;

    /* ---- Sekundaerfarben ---- */
    --color-secondary:       #2c3e50;
    --color-secondary-dark:  #1a252f;
    --color-secondary-light: #34495e;

    /* ---- Oberflaechen ---- */
    --color-surface:    #FFFFFF;
    --color-page-bg:    var(--color-neutral-50);
    --color-sidebar-bg: var(--color-neutral-100);
    --color-header-bg:  #FFFFFF;

    /* ---- Typografie ---- */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

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

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

    --line-height-tight:  1.25;
    --line-height-normal: 1.5;
    --line-height-loose:  1.75;

    /* ---- Spacing (8px Basis) ---- */
    --space-0:  0;
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Rueckwaertskompatibel */
    --spacing-xs:  var(--space-1);
    --spacing-sm:  var(--space-2);
    --spacing-md:  var(--space-4);
    --spacing-lg:  var(--space-6);
    --spacing-xl:  var(--space-8);
    --spacing-2xl: var(--space-12);

    /* ---- Layout ---- */
    --header-height:          60px;
    --sidebar-width:          240px;
    --sidebar-collapsed-width: 64px;
    --chat-panel-width:       380px;
    --content-max-width:      1400px;

    /* ---- Schatten (subtiler, moderner) ---- */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.03);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.06);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08);

    /* ---- Rundungen ---- */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ---- Focus Ring ---- */
    --ring-width:  2px;
    --ring-color:  var(--color-primary-400);
    --ring-offset: 2px;
    --ring: 0 0 0 var(--ring-offset) white, 0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--ring-color);

    /* ---- Transitions ---- */
    --duration-fast:  100ms;
    --duration-base:  200ms;
    --duration-slow:  300ms;
    --duration-enter: 250ms;
    --duration-exit:  200ms;

    --ease-in:     cubic-bezier(0.4, 0, 1, 0.5);
    --ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Rueckwaertskompatibel */
    --transition-fast: var(--duration-fast) var(--ease-in-out);
    --transition-base: var(--duration-base) var(--ease-in-out);
    --transition-slow: var(--duration-slow) var(--ease-in-out);
}

/* --- Kalender Rueckwaertskompatibilitaet (--gray-*, --primary, --font-sm etc.) --- */
:root {
    --gray-50:  var(--color-neutral-50);
    --gray-100: var(--color-neutral-100);
    --gray-200: var(--color-neutral-200);
    --gray-300: var(--color-neutral-300);
    --gray-400: var(--color-neutral-400);
    --gray-500: var(--color-neutral-500);
    --gray-600: var(--color-neutral-600);
    --gray-700: var(--color-neutral-700);
    --gray-800: var(--color-neutral-800);
    --gray-900: var(--color-neutral-900);
    --primary:  var(--color-primary-500);
    --font-sm:  var(--font-size-sm);
    --font-md:  var(--font-size-md);
}