/* public/css/tokens.css */
/* ===================================================================
   DESIGN TOKENS - stabile Schnittstelle für System- und Schuldesign
   =================================================================== */

:root {
    /* Brand */
    --brand-primary: #9E182E;
    --brand-primary-light: #fff0f3;
    --brand-primary-lighter: #fffafa;
    --brand-primary-hover: #8c1529;
    --brand-secondary: #e7cdd3;

    /* Flächen */
    --surface-page: #fcfcfc;
    --surface-panel: #ffffff;
    --surface-sidebar: var(--brand-secondary);
    --surface-hover: #f5f5f5;
    --surface-modal: #fefefe;
    --surface-modal-body: #fffafa;
    --surface-error-soft: #fff0f3;
    --surface-soft: #f8fafc;
    --surface-muted: #f2f4f7;
    --surface-selected: #eff6ff;
    --logout-bg: var(--brand-primary-light);

    /* Linien, Schatten und interaktive Flächen */
    --border-subtle: #d0d5dd;
    --border-muted: #eaecf0;
    --border-strong: #98a2b3;
    --shadow-card-sm: 0 10px 25px rgba(15, 23, 42, 0.04);
    --shadow-card-md: 0 16px 30px rgba(15, 23, 42, 0.08);
    --shadow-modal: 0 30px 60px rgba(15, 23, 42, 0.20);

    /* Text */
    --text-default: #333333;
    --text-muted: #666666;
    --text-inverted: #ffffff;

    /* Status */
    --status-error: #cc0000;
    --status-error-strong: #b00020;
    --status-success: #1b7f3a;
    --status-warning: #a86700;
    --status-info: #336699;

    /* Sanfte Statusflächen */
    --status-info-bg: #D4E6F9;
    --status-success-bg: #E1F5EB;
    --status-warning-bg: #FCF4DE;
    --status-error-bg: #FCDDDD;

    /* Gemeinsame Label-Farben */
    --label-red: #c62828;
    --label-blue: #336699;
    --label-amber: #c28c00;
    --label-violet: #7b4bb7;

    /* Abgeleitete Effekte */
    --focus-ring-color: color-mix(in srgb, var(--brand-primary) 25%, transparent);

    /* Layout */
    --layout-sidebar-width: 170px;
    --layout-sidebar-padding: 5px;
    --layout-shell-gap: 13px;
    --content-max-width: 1987px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-card: var(--radius-lg);
    --radius-control: 10px;
    --radius-pill: 999px;


    /* Abstände */
    --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;

    /* Komponenten */
    --button-height: 2.5rem;
    --button-height-sm: 2rem;
    --button-padding-y: 0.625rem;
    --button-padding-x: 0.95rem;
    --button-padding-y-sm: 0.375rem;
    --button-padding-x-sm: 0.7rem;
    --button-gap: var(--space-2);
    --button-radius: var(--radius-sm);
    --button-font-weight: 400;
    --button-bg: var(--brand-primary);
    --button-bg-hover: var(--brand-primary-hover);
    --button-border: var(--brand-primary);
    --button-color: var(--text-inverted);

    --card-bg: var(--surface-panel);
    --card-border: var(--border-strong);
    --card-padding: 0;
    --admin-card-padding: var(--space-5);
    --card-padding-compact: var(--space-4);
    --card-shadow: var(--shadow-card-sm);
    --card-radius: 10px;

    --form-field-gap: var(--space-2);
    --form-control-height: 2.5rem;
    --form-control-padding-y: 0.55rem;
    --form-control-padding-x: var(--space-3);
    --form-control-bg: var(--surface-panel);
    --form-control-border: var(--border-subtle);
    --form-control-border-focus: var(--brand-primary);
    --form-control-radius: var(--radius-md);

    --table-cell-padding-y: var(--space-3);
    --table-cell-padding-x: var(--space-4);
    --table-border: var(--border-muted);
    --table-header-bg: var(--surface-soft);
    --table-row-hover-bg: var(--surface-selected);

    --badge-height: 1.5rem;
    --badge-padding-x: var(--space-2);
    --badge-radius: var(--radius-pill);
    --badge-font-size: 0.75rem;

    --empty-state-bg: var(--surface-soft);
    --empty-state-border: var(--border-subtle);
    --empty-state-radius: var(--radius-card);
    --empty-state-padding: var(--space-8);

    --modal-width: 42rem;
    --modal-max-height: 48rem;
    --modal-radius: var(--radius-lg);
    --modal-backdrop-bg: rgba(15, 23, 42, 0.55);
    --z-modal: 1100;

    /* Typografie */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Kompatibilitäts-Aliase für bestehende Styles. */
    --primary-color: var(--brand-primary);
    --primary-color-hover: var(--brand-primary-hover);
    --sidebar-bg: var(--surface-sidebar);
    --link-hover-bg: var(--surface-hover);
    --text-color: var(--text-default);
    --text-light: var(--text-inverted);
    --modal-bg: var(--surface-modal);
    --modal-body-bg: var(--surface-modal-body);
    --border-color: var(--border-subtle);
    --error-color: var(--status-error);
    --danger-color: var(--status-error);
    --light-red-bg: var(--surface-error-soft);
    --font-family-sans: var(--font-family-base);
    --sidebar-width: var(--layout-sidebar-width);
    --sidebar-padding: var(--layout-sidebar-padding);
    --app-shell-gap: var(--layout-shell-gap);
    --border-radius: var(--radius-sm);
}