/**
 * EasyFirma Design Token – single source of truth.
 * All CSS files must reference only these variables, never raw hex values.
 *
 * Canonical palette:
 *   primary ............. #688bb1    primary-dark ........ #6082a7
 *   primary-darker ...... #3c5774    bg-secondary ........ #f0f4f7
 *   bg-tertiary ......... #dfe7ed    cancel .............. #dfe5e8
 *   border-medium ....... #c1d3e5    success ............. #5faf7b
 *   danger .............. #d96b6b    warning ............. #ea9d50
 *   text-primary ........ #474747    text-secondary ...... #939393
 *   status-yellow ....... #ffd766    status-archiv ....... #656565
 */

:root {
    /* ═══════════════════════════════════════════════════════════
       LAYER 1 – PRIMITIVE PALETTE  (raw hex only, never var())
       ═══════════════════════════════════════════════════════════ */

    /* ── Brand / Primary Blue ───────────────────────────────── */
    --ef-primary:          #688bb1;       /* main brand blue – buttons, links, active nav      */
    --ef-primary-dark:     #6082a7;       /* hover / pressed primary – button hover            */
    --ef-primary-darker:   #3c5774;       /* deep accent – headings, sidebar bg                */
    --ef-primary-medium:   #96cced;       /* pale sky-blue – highlights, subtle accents        */
    --ef-primary-disabled: #b0c4d8;       /* disabled primary – greyed-out state               */
    --ef-primary-rgb:      104, 139, 177; /* RGB tuple for rgba() overlays                     */

    /* ── Text ───────────────────────────────────────────────── */
    --ef-text-primary:     #474747; /* default body text – labels, table cells, values       */
    --ef-text-secondary:   #939393; /* muted text – placeholders, captions                   */
    --ef-text-tertiary:    #d9d9d9; /* disabled text – read-only, ghost placeholders         */
    --ef-text-light:       #ffffff; /* text on dark / coloured surfaces – badge labels       */
    --ef-text-description: #656565; /* subtitles and descriptions – card sub-headers         */

    /* ── Backgrounds ────────────────────────────────────────── */
    --ef-bg-canvas:    #f7f7f7; /* outermost page background – html / body               */
    --ef-bg-primary:   #ffffff; /* card and panel surfaces – modals, forms, dropdowns    */
    --ef-bg-secondary: #f0f4f7; /* slightly tinted – sidebar sections, table stripes     */
    --ef-bg-tertiary:  #dfe7ed; /* stronger tint – hover rows, dividers, tags            */
    --ef-cancel:       #dfe5e8; /* Abbrechen / Schließen button surface                  */

    /* ── Borders ────────────────────────────────────────────── */
    --ef-border-medium: #c1d3e5; /* standard border – inputs, cards, grid lines           */

    /* ── Semantic Status ────────────────────────────────────── */
    --ef-success:          #5faf7b; /* positive state – Aktiv, Bezahlt, Fertig               */
    --ef-success-dark:     #4c9a68; /* hover / pressed success                               */
    --ef-error:            #c45757; /* error / destructive hover – invalid input             */
    --ef-warning:          #ea9d50; /* amber – Fällig, overdue, attention                    */
    --ef-danger:           #d96b6b; /* destructive default – Löschen button                  */
    --ef-danger-very-dark: #991b1b; /* deep red text on light danger surfaces                */
    --ef-danger-light:     #f5c6c6; /* pale red – icon bg for danger badges                  */

    /* ── Traffic-light Primitives ───────────────────────────── */
    --ef-status-yellow: #ffd766; /* yellow chip – Offen, Warnung, Privat filter           */
    --ef-status-archiv: #656565; /* dark-gray – Archiv badge text / border                */

    /* ── Sizing & Spacing ───────────────────────────────────── */
    --ef-radius-xs:                  0.25rem;  /*  4px – tight corners, small tags          */
    --ef-radius-sm:                  0.375rem; /*  6px – input fields, small chips          */
    --ef-radius-md:                  0.5rem;   /*  8px – cards, dropdowns                   */
    --ef-radius-lg:                  0.625rem; /* 10px – standard buttons, panels           */
    --ef-radius-xl:                  0.75rem;  /* 12px – modals, large cards                */
    --ef-touch-target:               2.75rem;  /* 44px – WCAG 2.5.8 minimum tap target      */
    --ef-button-height:              2.75rem;  /* 44px – standard button height             */
    --ef-input-height:               2.125rem; /* 34px – standard text-input height         */
    --ef-touch-input-height-mobile:  2.75rem;  /* 44px – touch-safe input height on mobile  */
    --ef-touch-button-height-mobile: 2.75rem;  /* 44px – touch-safe button height on mobile */
    --ef-touch-row-height-mobile:    3rem;     /* 48px – touch-safe list row height         */
    --ef-mobile-input-font-size:     1rem;     /* 16px – prevents iOS auto-zoom on focus    */

    /* ── Transitions & Motion ───────────────────────────────── */
    --ef-transition-fast: 0.15s ease; /* default speed – hover, focus animations           */

    /* ── Filter / Toggle Buttons ────────────────────────────── */
    --ef-status-filter-hover: var(--ef-bg-tertiary); /* hover bg for grouped toggle & filter buttons – matches grid row hover */

    /* ── Navigation / Avatar ────────────────────────────────── */
    --ef-avatar-status: #ea9d4f; /* warm amber dot – online / active indicator            */

    /* ── Time-tracking Status (standalone, not aliased) ────── */
    --ef-status-blue:            #2563eb;  /* strong blue – active time-tracking indicator   */
    --ef-status-blue-active:     #3b82f6;  /* lighter blue – hover / active state            */
    --ef-status-blue-light:      #93c5fd;  /* pale blue – progress bar fill                  */
    --ef-status-blue-very-light: #eff6ff;  /* near-white blue tint – row / surface bg        */
    --ef-status-amber:           #f59e0b;  /* amber – Laufend / warning state                */
    --ef-status-amber-fg:        #d97706;  /* darker amber – text on amber surfaces          */
    --ef-status-green-500:       #22c55e;  /* vivid green – Abgeschlossen / completed        */

    /* ── Dokumente Accent ───────────────────────────────────── */
    --ef-dok-accent:        #5fa8d3;      /* light-blue icon / row accent in document list  */
    --ef-dok-accent-dark:   #4a93be;      /* darker accent – hover states in document list  */
    --ef-dok-accent-rgb:    95, 168, 211; /* RGB tuple for rgba() overlays                  */
    --ef-dok-surface-hover: #eef4fb;      /* row hover background tint                      */

    /* ── Rabatte Panel ──────────────────────────────────────── */
    --ef-rabatte-bg:     #fef9ef; /* pale cream – discount panel background                */
    --ef-rabatte-border: #f5d98a; /* warm yellow – discount panel outline                  */
    --ef-rabatte-text:   #78350f; /* dark amber-brown – text inside discount panel         */

    /* ── Edit Action Chip ───────────────────────────────────── */
    --ef-action-edit-bg:       #fef3c7; /* pale amber – edit chip default background        */
    --ef-action-edit-fg:       #b45309; /* amber-brown – edit chip icon / label             */
    --ef-action-edit-border:   #fde68a; /* amber – edit chip outline                        */
    --ef-action-edit-hover-bg: #fde68a; /* deeper amber – edit chip hover background        */
    --ef-action-edit-hover-fg: #92400e; /* dark brown – edit chip hover icon / label        */

    /* ── Code Preview ───────────────────────────────────────── */
    --ef-code-bg:   #1e1e1e; /* VS Code dark – monospace / code block background          */
    --ef-code-text: #d4d4d4; /* VS Code light – monospace / code block foreground         */

    /* ── Kundentyp Badge Primitives ─────────────────────────── */
    --ef-badge-privat-bg:    #f5ede0; /* warm sand – Privat badge background                */
    --ef-badge-privat-fg:    #7c4f28; /* dark amber-brown – Privat badge text               */
    --ef-badge-firma-bg:     #e0e8f0; /* slate blue-gray – Unternehmen badge background     */
    --ef-badge-firma-fg:     var(--ef-primary-darker); /* deep blue – Unternehmen badge text  */
    --ef-badge-lieferant-bg: #e4ede6; /* sage green – Lieferant badge background            */
    --ef-badge-lieferant-fg: #3a6645; /* dark sage – Lieferant badge text                   */

    /* ═══════════════════════════════════════════════════════════
       LAYER 2 – SEMANTIC ALIASES  (var() references only)
       Changing a Layer 1 primitive propagates here automatically.
       ═══════════════════════════════════════════════════════════ */

    /* ── Backgrounds (aliased) ──────────────────────────────── */
    --ef-bg-dark:       var(--ef-primary-darker); /* tooltip and overlay dark surface          */
    --ef-primary-light: var(--ef-bg-tertiary);    /* light tinted primary – tag / chip surfaces */
    --ef-border-light:  var(--ef-bg-tertiary);    /* subtle border – dividers, separator lines  */

    /* ── Status (aliased) ───────────────────────────────────── */
    --ef-success-bg:            var(--ef-bg-secondary);   /* pale bg behind success panels     */
    --ef-success-border:        var(--ef-border-medium);  /* border around success panels       */
    --ef-status-green:          var(--ef-success);        /* grid badge: Aktiv, Fertig, Bezahlt */
    --ef-status-default:        var(--ef-text-secondary); /* grid badge: Gelöscht / unknown     */
    --ef-status-archiv-surface: var(--ef-bg-secondary);   /* Archiv badge background            */
    --ef-status-red-500:        var(--ef-warning);        /* Fällig / overdue badge (legacy)    */
    --ef-status-orange:         var(--ef-warning);        /* overdue row accent color           */

    /* ── Buttons (aliased) ──────────────────────────────────── */
    --ef-button-Neu:     var(--ef-success);      /* Neu / create – green                       */
    --ef-button-cancel:  var(--ef-cancel);       /* Abbrechen / Schließen – cool gray          */
    --ef-button-disable: var(--ef-bg-secondary); /* disabled / inactive state background       */
    --ef-button-Löschen: var(--ef-danger);       /* Löschen / delete – red                     */
    --ef-button-gray:    var(--ef-bg-tertiary);  /* neutral secondary button background        */

    /* ── Input (aliased) ────────────────────────────────────── */
    --ef-input-valid:  var(--ef-success);      /* valid input border / checkmark color         */
    --ef-input-btn-bg: var(--ef-bg-tertiary);  /* input addon / suffix button background       */

    /* ── Grid Row-Action Buttons (aliased) ──────────────────── */
    --ef-grid-action-primary-bg:         var(--ef-bg-secondary);  /* default bg              */
    --ef-grid-action-primary-fg:         var(--ef-primary-dark);  /* icon / label color      */
    --ef-grid-action-primary-border:     var(--ef-border-medium); /* outline                 */
    --ef-grid-action-icon-bg:            var(--ef-bg-secondary);  /* icon-only btn default bg */
    --ef-grid-action-icon-fg:            var(--ef-primary-dark);  /* icon color              */
    --ef-grid-action-icon-border:        var(--ef-border-medium); /* icon btn outline        */
    --ef-grid-action-icon-danger-fg:     var(--ef-danger);        /* destructive icon color  */
    --ef-grid-action-icon-danger-border: var(--ef-border-medium); /* destructive outline     */
    --ef-grid-action-icon-danger-bg:     var(--ef-bg-secondary);  /* destructive icon bg     */

    /* ── Action-Button Chips (aliased) ──────────────────────── */
    --ef-action-add-bg:        var(--ef-bg-secondary);  /* add chip default background        */
    --ef-action-add-fg:        var(--ef-success);       /* add chip icon / label              */
    --ef-action-add-border:    var(--ef-border-medium); /* add chip outline                   */
    --ef-action-remove-bg:     var(--ef-bg-secondary);  /* remove chip default background     */
    --ef-action-remove-fg:     var(--ef-danger);        /* remove chip icon / label           */
    --ef-action-remove-border: var(--ef-border-medium); /* remove chip outline                */

    /* ── Badges (aliased) ───────────────────────────────────── */
    --ef-badge-kategorie-bg: var(--ef-bg-tertiary);    /* Kategorie chip background            */
    --ef-badge-kategorie-fg: var(--ef-primary-dark);   /* Kategorie chip text                  */
    --ef-badge-gesperrt-fg:  var(--ef-error);          /* Gesperrt badge text                  */
    --ef-badge-gesperrt-bg:  var(--ef-danger);         /* Gesperrt badge background            */
    --ef-badge-bestand-fg:   var(--ef-success);        /* Bestand badge text / icon            */
    --ef-badge-bestand-bg:   var(--ef-success-dark);   /* Bestand badge background             */

    /* ── Shared Dropdown Panel ──────────────────────────────── */
    /* Edit here → all dropdowns (Status, Export, Profile) update automatically */
    --ef-dropdown-min-width:    12rem;
    --ef-dropdown-bg:           var(--ef-bg-primary);
    --ef-dropdown-border:       1px solid var(--ef-border-medium);
    --ef-dropdown-radius:       var(--ef-radius-md);
    --ef-dropdown-shadow:       0 4px 16px rgba(0, 0, 0, 0.1);
    --ef-dropdown-padding-y:    0.35rem;
    --ef-dropdown-item-px:      1rem;
    --ef-dropdown-item-py:      0.5rem;
    --ef-dropdown-item-gap:     0.5rem;
    --ef-dropdown-item-fs:      0.85rem;
    --ef-dropdown-item-fw:      500;        /* native HTML; DX blocks need 600 to compensate its internal reset */
    --ef-dropdown-item-fw-dx:   600;        /* font-weight for DX-rendered toolbar / context-menu items        */
    --ef-dropdown-item-color:   var(--ef-text-secondary);
    --ef-dropdown-item-hover-bg: var(--ef-bg-secondary);
    --ef-dropdown-icon-fs:      0.95rem;
    --ef-dropdown-icon-color:   var(--ef-primary);
}