/*
 * tokens.css — SINGLE SOURCE OF TRUTH for all theme tokens. Change colors here.
 *
 * Loaded FIRST (before Kendo) in Views/Shared/_Layout.cshtml.
 * LIGHT values live in :root; DARK overrides in body.dark-theme.
 */

:root {
    /* --- typography / sizing --- */
    --label-font-size: 12px;
    --value-font-size: 14px;
    --title-font-size: 16px;

    /* popup-menu (Kendo context menu / submenu) item spacing — THE standard.
       Consumed by the global default in Common.css (.k-menu-popup .k-menu-link).
       Theme-wide so every popup menu reads identically; tune here, not per-menu. */
    --menu-item-py: 10px; /* vertical padding → ~37px rows */
    --menu-item-px: 12px; /* leading (left) inset */

    /* --- new semantic system (light) --- */
    --surface: #ffffff;
    --surface-2: #f6f6f8;
    --hover: #e8e8e8;
    --border: #ececef;
    --border-strong: #dcdce1;
    --text: #15161a;
    --text-muted: #6a6e76;
    --text-subtle: #9a9ca4;
    --accent: #2563eb;
    --accent-tint: rgba(37,99,235,.10);
    --accent-tint-2: rgba(37,99,235,.22);
    --red: #e5484d;
    /* RAG / status data palette + soft tints (bg = -t, text = -tx) */
    --green: #16a34a;
    --amber: #d9971a;
    --green-t: rgba(22,163,74,.12);
    --green-tx: #15803d;
    --amber-t: rgba(217,151,26,.15);
    --amber-tx: #92600a;
    --red-t: rgba(229,72,77,.12);
    --red-tx: #c0353a;
    --blue: var(--accent); /* status "Open" = brand blue */
    --blue-t: var(--accent-tint);
    --blue-tx: #1d4ed8;
    --c-amber: #f0a028; /* categorical amber — source-project accent */
    /* categorical / object-type palette (query-type tiles, type icons, charts) */
    --c-blue: #2e6fe0;
    --c-teal: #14b8a6;
    --c-teal-t: rgba(20,184,166,.12); /* soft teal tint (tag pills) */
    --c-teal-tx: #0f766e;
    --c-green: #22a049;
    --c-orange: #e2693e;
    --c-purple: #8b5cf6;
    --c-indigo: #5b6ef0;
    --c-red: #e5484d;
    --c-cyan: #0891b2;  /* checkpoint / quality-gate */
    --c-slate: #64748b; /* structural types (workstream, phase, wiki, resource, extern) */
    --c-sand: #c99a3a;  /* document management (drive) */
    --shadow-pop: 0 14px 38px -10px rgba(16, 24, 40, .22), 0 0 0 1px var(--border);
    --shadow-card: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
    --shadow-float: 0 8px 24px -8px rgba(16,24,40,.18), 0 0 0 1px var(--border);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    --r-sm: var(--radius-sm);
    --r-btn: var(--radius-md);
    --r-card: var(--radius-lg);
    --nav-w: 236px;

    /* --- legacy system (light) — moved from Common.css :root, kept 1:1 --- */
    --color-corporate: #1f263e;
    --color-btn-primary: #15161a;
    --color-font-red: #e5484d;
    --color-font-white: #ffffff;
    --color-font-black: #15161a;    
    --color-font-alternate: #e9e9ec;
    --color-font-light: #808080;
    --color-light-gray: #f2f2f2;
    --color-medium-gray: #dadada;
    --color-box-shadow: #b2b2b2;
    --color-box-shadow-dark: #404040;
    --color-box-shadow-light: #e9ebee;
    --color-primary-bg: #ffffff;
    --color-secondary-bg: #f2f2f2;
    
    --color-hover-bg: #f2f2f2;
    --color-selected-bg: #f2f2f2;
    --color-item-selected-bg: #f2f2f2;
    --color-item-selected-font: #404040;     
    --color-active-dark: #404040;
    --color-drag-over: #deebf7;
    --color-border: #dadada;
    --color-border-light: #f2f2f2;
    --color-line: #dadada;
    --color-tooltip-bg: #ffffff;
    --color-widget-bg: #ffffff;
    --color-card-bg: #ffffff;
    --color-card-button-bg: #f2f2f2;
    --color-popup-bg: #ffffff;
    --color-topbar-bg: #0a0a0c;
    --color-topbar-border: #343f66;
    --color-navbar-bg: #f0f0f0;
    --color-navbar-border: transparent;
    --color-navbar-active-bg: #dedede;
    --color-navbar-open-bg: #dedede;
    --color-navbar-submenu-bg: #dedede;
    --color-navbar-submenu-active-bg: #cacaca;
    --color-navbar-submenu-shadow: #dadada;
    --color-navbar-tooltip-bg: #3d3d3d;
    --color-data-area-bg: #f6f8fb;
    --color-dlv-input: #c00000;
    --color-dlv-output: #00b050;
    --image-tick: url(/Images/AppImages/tick-gray.png);
}

body.dark-theme {
    /* --- new semantic system (dark) --- */
    --surface: #15161a;
    --surface-2: #1b1c21;
    --hover: #37383d;
    --border: rgba(255,255,255,.09);
    --border-strong: rgba(255,255,255,.15);
    --text: #e9e9ec;
    --text-muted: #9a9ca4;
    --text-subtle: #6c6e77;
    --accent: #5b92ec;
    --accent-tint: rgba(91,146,236,.16);
    --accent-tint-2: rgba(91,146,236,.32);
    /* RAG / status data palette + soft tints (dark) */
    --green: #34d27b;
    --amber: #e3b04b;
    --green-t: rgba(52,210,123,.16);
    --green-tx: #57d98e;
    --amber-t: rgba(227,176,75,.16);
    --amber-tx: #e3b04b;
    --red-t: rgba(240,105,110,.16);
    --red-tx: #f0888c;
    --blue: var(--accent); /* status "Open" = brand blue */
    --blue-t: var(--accent-tint);
    --blue-tx: #9cc0ff;
    --c-amber: #f0a028;
    /* categorical / object-type palette (dark) */
    --c-blue: #5b92ec;
    --c-teal: #2dd4bf;
    --c-teal-t: rgba(45, 212, 191, .16); /* soft teal tint (tag pills) */
    --c-teal-tx: #5eead4;
    --c-green: #34d27b;
    --c-orange: #ef7e54;
    --c-purple: #a78bfa;
    --c-indigo: #7c8cf5;
    --c-red: #f0696e;
    --c-cyan: #22d3ee;  /* checkpoint / quality-gate */
    --c-slate: #94a3b8; /* structural types (workstream, phase, wiki, resource, extern) */
    --c-sand: #e6c07a;  /* document management (drive) */
    --shadow-pop: 0 16px 40px -12px rgba(64, 64, 64, .7), 0 0 0 1px var(--border);
    --shadow-card: 0 1px 2px rgba(0,0,0,.4);
    --shadow-float: 0 10px 28px -10px rgba(0,0,0,.7), 0 0 0 1px var(--border);
    /* --- legacy system (dark) — Neutrale auf Meridian Near-Black-Skala vereinheitlicht (Body #15161a).
       Elevation: #15161a → #1b1c21 → #22242b → #2b2d35 → #33353d; Inputs recessed #101114.
       Akzent-/Funktionsfarben (corporate / selection / active / drag) bewusst unverändert. --- */
    --color-corporate: #0078d4;
    --color-btn-primary: var(--color-corporate);    
    --color-font-alternate: #1f263e;
    --color-font-light: #d3d3d3;
    --color-light-gray: #33353d;
    --color-medium-gray: #33353d;
    --color-box-shadow: #000000;
    --color-box-shadow-dark: #000000;
    --color-box-shadow-light: #000000;
    --color-primary-bg: #15161a;
    --color-secondary-bg: #22242b;    
    --color-hover-bg: #2b2d35;
    --color-selected-bg: #223b59;
    --color-item-selected-bg: #0078d4;
    --color-item-selected-font: #ffffff;
    --color-active-dark: #0078d4;
    --color-widget-bg: #33353d;
    --color-card-bg: #101114;
    --color-card-button-bg: #223b59;
    --color-popup-bg: #22242b;
    --color-topbar-bg: #000000;
    --color-topbar-border: #2b2d35;
    --color-navbar-bg: #1b1c21;
    --color-navbar-border: #2b2d35;
    --color-navbar-active-bg: #2b2d35;
    --color-navbar-open-bg: #26272d;
    --color-navbar-submenu-bg: #1b1c21;
    --color-navbar-submenu-active-bg: #2b2d35;
    --color-navbar-submenu-shadow: #000000;
    --color-navbar-tooltip-bg: #d8d6d4;
    --color-drag-over: #0078d4;
    --color-border: #2b2d35;
    --color-border-light: #2b2d35;
    --color-line: #26272d;
    --color-tooltip-bg: #22242b;
    --color-data-area-bg: #17181d;
    --image-tick: url(/Images/AppImages/tick-white.png);
}