:root {
    --sab: env(safe-area-inset-bottom, 0px);

    /* --- layout --- */
    --header-height:          60px;
    --sidebar-left-width:     320px;
    --sidebar-right-width:    560px;
    --sidebar-collapsed-width: 46px;

    /* modal always on a light surface regardless of theme */
    --modal-bg:     #F1EAC5;
    --modal-text:   #172F13;
    --modal-border: rgba(23, 47, 19, 0.20);

    /* --- typography --- */
    --font-body:    system-ui, -apple-system, BlinkMacSystemFont, "Produkt", sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;
    --text-xs:      11px;
    --text-sm:      13px;
    --text-base:    15px;
    --text-md:      16px;
    --text-lg:      18px;
    --text-xl:      20px;
    --text-xxl:     24px;
    --text-xxxl:    32px;
    --leading:      1.55;

    /* --- radius --- */
    --r-xs:   6px;
    --r-sm:   10px;
    --r-md:   16px;
    --r-lg:   22px;
    --r-full: 9999px;

    /* --- transitions --- */
    --t-fast:    0.15s ease;
    --t-med:     0.25s ease;
    --t-sidebar: 0.30s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- dark-mode colors (default) --- */
    --c-bg:           #172F13;
    --c-text:         #AEADAC;
    --c-text-muted:   rgba(174, 173, 172, 0.55);
    --c-accent:       #800020;
    --c-accent-hover: #6d001b;
    --c-success:      #4caf50;
    --c-success-border: rgba(76, 175, 80, 0.40);

    --c-nav-border: #F1EAC5;

    /* --- glass (dark) --- */
    --glass-bg:     rgba(23, 47, 19, 0.55);
    --glass-border: rgba(174, 173, 172, 0.15);
    --glass-blur:   blur(20px);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.30),
                    inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* --- background crosshatch --- */
    --pattern-tint: rgba(174, 173, 172, 0.06);

    /* --- logo always on a light surface --- */
    --logo-bg: rgba(241, 234, 197, 0.90);

    /* --- entity label badges (dark mode) --- */
    --label-concept-bg:           rgba(128,   0,  32, 0.30);
    --label-concept-color:        #f0a0b0;
    --label-dataset-bg:           rgba( 42, 100, 150, 0.30);
    --label-dataset-color:        #7ec8e3;
    --label-datasetelement-bg:    rgba( 74, 124,  89, 0.30);
    --label-datasetelement-color: #a8d5a2;
}

[data-theme="light"] {
    --c-bg:         #F1EAC5;
    --c-text:       #172F13;
    --c-text-muted: rgba(23, 47, 19, 0.55);

    --c-nav-border: #800020;

    --glass-bg:     rgba(241, 234, 197, 0.60);
    --glass-border: rgba(23, 47, 19, 0.15);
    --glass-shadow: 0 8px 32px rgba(23, 47, 19, 0.12),
                    inset 0 1px 0 rgba(255, 255, 255, 0.50);

    --pattern-tint: rgba(23, 47, 19, 0.06);

    /* --- entity label badges (light mode) --- */
    --label-concept-bg:           rgba(128,   0,  32, 0.12);
    --label-concept-color:        #6b0018;
    --label-dataset-bg:           rgba( 42, 100, 150, 0.12);
    --label-dataset-color:        #1a5276;
    --label-datasetelement-bg:    rgba( 74, 124,  89, 0.12);
    --label-datasetelement-color: #2d6a40;
}