/* ==========================================================================
   IDBG — Brand design tokens
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted Open Sans (Apache-2.0, includes Cyrillic) — same family as cgbg.
   URLs are relative to this stylesheet (assets/), so they resolve regardless
   of the app's base path. Subset by unicode-range to keep first paint light;
   font-display:optional avoids a fallback→swap flash.
   -------------------------------------------------------------------------- */
@font-face { font-family:'Open Sans'; font-style:normal; font-weight:300 800; font-display:optional; src:url(fonts/opensans-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Open Sans'; font-style:normal; font-weight:300 800; font-display:optional; src:url(fonts/opensans-cyrillic.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Open Sans'; font-style:normal; font-weight:300 800; font-display:optional; src:url(fonts/opensans-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Open Sans'; font-style:normal; font-weight:300 800; font-display:optional; src:url(fonts/opensans-cyrillic-ext.woff2) format('woff2'); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }

:root {
    /* -------- Brand colors (aligned with cgbg) -------- */
    --brand-blue: #0b5fff;
    --brand-blue-dark: #0a4cd1;
    --brand-blue-light: #f0f5ff;
    /* Mid-tone used by cgbg gradients/footer link hover */
    --brand-blue-mid: #5b8cff;
    /* Card/tint border used by cgbg (.card border) */
    --brand-blue-border: #dbeafe;

    /* cgbg uses orange (#ff8a00) as its accent, not amber */
    --brand-amber: #ff8a00;
    --brand-amber-dark: #d97400;

    /* -------- Semantic -------- */
    --color-success: #22C55E;
    --color-success-bg: #DCFCE7;
    --color-danger: #EF4444;
    --color-danger-bg: #FEE2E2;
    --color-warning: #F59E0B;
    --color-warning-bg: #FEF3C7;
    --color-info: #3B82F6;
    --color-info-bg: #DBEAFE;

    /* -------- Status tones (статуси на документи) --------
       Оранжевото и лилавото нямаха токени — добавени за „Частично",
       „Просрочена" (тоновете на StatusBadge в design-components.css).
       ВНИМАНИЕ: звездичка, последвана от наклонена черта, затваря коментара
       предварително и следващата декларация се губи тихо — точно така
       „.status-" със звездичка и наклонена черта изяде --color-orange и
       оставяше „Частично" без точка. Не пишете глоб-шаблони тук. */
    --color-orange: #F97316;
    --color-orange-bg: #FFEDD5;
    --color-orange-text: #C2410C;
    /* „Частично" стои на бледо жълт фон, за да не се слива с оранжево-
       червената „Просрочена", която ползва --color-orange-bg. */
    --color-yellow: #EAB308;
    --color-yellow-bg: #FEF9C3;
    --color-yellow-bg-hover: #FEF08A;
    --color-yellow-text: #A16207;
    --color-purple: #8B5CF6;

    /* -------- Neutral scale (slate) -------- */
    --slate-50: #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
    --slate-900: #0F172A;

    /* -------- Semantic tokens (referenced в компоненти) -------- */
    /* cgbg's body text is a warm-neutral #1a1a1a, not slate-900 */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: var(--slate-600);
    --color-text-muted: var(--slate-400);
    --color-text-inverted: #FFFFFF;

    --color-border: var(--slate-200);
    --color-border-strong: var(--slate-300);
    --color-border-focus: var(--brand-blue);

    /* --color-bg is a *surface* token (cards, panels, sticky bars) — keep white.
       The page canvas is separate: cgbg tints it #fafafa. */
    --color-bg: #FFFFFF;
    --color-canvas: #fafafa;
    --color-bg-subtle: var(--slate-50);
    --color-bg-card: #FFFFFF;
    --color-bg-input: #FFFFFF;
    --color-bg-hover: var(--slate-100);

    /* -------- Typography -------- */
    --font-ui: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;

    --text-hero: 56px;
    --text-h1: 42px;
    --text-h2: 32px;
    --text-h3: 24px;
    --text-h4: 20px;
    --text-body-lg: 18px;
    --text-body: 16px;
    --text-small: 14px;
    --text-caption: 12px;
    /* Скалата на интерфейса (docs/UI_STANDARD.md §1.2). Други размери на
       шрифт в CSS няма — правило 11 на bin/ui-lint.php. */
    --text-page: 26px;      /* H1 в заглавната лента (22 под 560px — долу) */
    --text-stat: 24px;      /* стойност в StatTile (компактната лента — --text-h4) */
    --text-btn: 15px;       /* бутони (btn-sm — --text-label) */
    --text-label: 13px;     /* етикет на поле, подсказка, мета под заглавието */
    --text-2xs: 11px;       /* заглавия на колони, броячи */

    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

    /* -------- Spacing scale (4px base) -------- */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

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

    /* -------- Shadows -------- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow: 0 2px 8px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
    --shadow-lg: 0 20px 40px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .04);
    --shadow-focus: 0 0 0 3px rgba(11, 95, 255, .2);

    /* -------- Animation -------- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration: 250ms;
    --duration-slow: 400ms;

    /* -------- Layout -------- */
    --container-max: 1320px;
    --container-hero-max: 1400px;
    --container-padding: 24px;
    /* Форма без таблица с редове и Настройки — до 960px, центрирана (§2.5). */
    --form-max: 960px;

    /* -------- Z-index (§1.3) — други стойности няма --------
       Модалите се трупат с +10 за всеки следващ (app-ux.js); менюто и
       календарът вътре в модал са над него (--z-popover). */
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-modal: 1200;
    --z-popover: 1300;
    --z-toast: 1400;
    --z-skip: 1500;

    /* Височината на хедъра в приложението: 12 + 64 + 12 + 1px линия.
       По нея toast-ът стои под хедъра, а не върху „+ Ново" (§5.8). */
    --header-h: 89px;

    /* -------- Тонове на статусите (§1.1, §6) — фон, текст, точка --------
       Стойностите са досегашните от списъците (.data-table-v2 .status-*) и
       от изгледа на документ. Смисълът на всеки тон е в таблицата на §6. */
    --tone-gray-bg: var(--slate-100);
    --tone-gray-text: var(--slate-700);
    --tone-gray-dot: var(--slate-400);
    --tone-gray-strong-bg: var(--slate-100);
    --tone-gray-strong-text: var(--slate-900);
    --tone-gray-strong-dot: var(--slate-600);
    --tone-blue-bg: var(--color-info-bg);
    --tone-blue-text: #1E3A8A;
    --tone-blue-dot: var(--color-info);
    --tone-green-bg: var(--color-success-bg);
    --tone-green-text: #065F46;
    --tone-green-dot: var(--color-success);
    --tone-amber-bg: var(--color-warning-bg);
    --tone-amber-text: #78350F;
    --tone-amber-dot: var(--color-warning);
    /* „Частично" — бледо жълт фон, за да не се слива с „Просрочена". */
    --tone-orange-bg: var(--color-yellow-bg);
    --tone-orange-text: var(--color-yellow-text);
    --tone-orange-dot: var(--color-yellow);
    --tone-orange-red-bg: var(--color-orange-bg);
    --tone-orange-red-text: #B91C1C;
    --tone-orange-red-dot: var(--color-danger);
    --tone-red-bg: var(--color-danger-bg);
    --tone-red-text: #991B1B;
    --tone-red-dot: var(--color-danger);
    /* „Изпратена/Видяна" и „Осчетоводена" са флагове (StatusFlag), не тонове
       на значката — техните тонове blue-soft и purple отпаднаха (finalize). */

    /* -------- Палитра (F2: литералите от компонентите → токени) --------
       Цветовете, прозрачностите и сенките, които компонентите ползваха като
       литерали. Стойностите са досегашните — видът не се сменя. Новият код
       ползва семантичните токени по-горе; неизползваните са махнати (finalize).
       --text-xl (22) и --text-3xl (48) са досегашни размери извън скалата
       (логото, сумата за плащане, иконата-глиф) — новият код ползва скалата. */
    --white-a70: rgba(255, 255, 255, .7);
    --slate-900-a02: rgba(15, 23, 42, .02);
    --shadow-legacy-1: 0 1px 2px var(--slate-900-a02);
    --brand-blue-a12: rgba(11, 95, 255, .12);
    --ring-brand-blue-a12: 0 0 0 3px var(--brand-blue-a12);
    --gray-555: #555;
    --slate-900-a10: rgba(15, 23, 42, .1);
    --slate-900-a04: rgba(15, 23, 42, .04);
    --shadow-legacy-2: 0 8px 28px var(--slate-900-a10), 0 2px 4px var(--slate-900-a04);
    --slate-900-a45: rgba(15, 23, 42, .45);
    --shadow-legacy-3: 0 1px 0 var(--slate-900-a02);
    --gray-eee: #eee;
    --amber-700: #B45309;
    --gray-aaa: #aaa;
    --gray-888: #888;
    --indigo-200: #C7D2FE;
    --red-200: #FECACA;
    --emerald-200: #A7F3D0;
    --amber-200: #FDE68A;
    --blue-200: #BFDBFE;
    --violet-tr: #7B4FD3;
    --violet-tr-a25: rgba(123, 79, 211, .25);
    --shadow-legacy-4: 0 1px 2px var(--violet-tr-a25);
    --teal-700: #0F766E;
    --teal-700-a25: rgba(15, 118, 110, .25);
    --shadow-legacy-5: 0 1px 2px var(--teal-700-a25);
    --accent-violet: #6E4BFF;
    --green-300: #86EFAC;
    --red-300: #FCA5A5;
    --amber-300: #FCD34D;
    --blue-300: #93C5FD;
    --slate-900-a06: rgba(15, 23, 42, .06);
    --shadow-legacy-6: 0 10px 30px var(--slate-900-a10), 0 2px 6px var(--slate-900-a06);
    --shadow-legacy-7: 0 1px 3px var(--slate-900-a06);
    --brand-blue-a15: rgba(11, 95, 255, .15);
    --ring-brand-blue-a15: 0 0 0 3px var(--brand-blue-a15);
    --shadow-legacy-8: 0 1px 3px var(--slate-900-a04);
    --red-500-a14: rgba(239, 68, 68, .14);
    --ring-red-500-a14: 0 0 0 3px var(--red-500-a14);
    --emerald-50: #ECFDF5;
    --indigo-800: #3730A3;
    --brand-blue-a04: rgba(11, 95, 255, .04);
    --shadow-legacy-9: 0 1px 3px var(--slate-900-a06), 0 1px 2px var(--slate-900-a04);
    --orange-200: #FED7AA;
    --slate-900-a55: rgba(15, 23, 42, .55);
    --slate-900-a25: rgba(15, 23, 42, .25);
    --white-a72: rgba(255, 255, 255, .72);
    --slate-200-a85: rgba(226, 232, 240, .85);
    --shadow-legacy-11: 0 30px 80px var(--slate-900-a25), 0 4px 16px var(--slate-900-a10);
    --shadow-inset-left-success: inset 3px 0 0 var(--color-success);
    --shadow-inset-left-brand-amber: inset 3px 0 0 var(--brand-amber);
    --shadow-inset-left-danger: inset 3px 0 0 var(--color-danger);
    --yellow-800: #854D0E;
    --shadow-legacy-12: 0 8px 24px var(--slate-900-a10);
    --violet-tr-a04: rgba(123, 79, 211, .04);
    --violet-tr-a08: rgba(123, 79, 211, .08);
    --teal-700-a05: rgba(15, 118, 110, .05);
    --teal-700-a09: rgba(15, 118, 110, .09);
    --cream-25: #FEF9F1;
    --sand-200: #F5D9A8;
    --brown-700: #8B5A1A;
    --brand-blue-a10: rgba(11, 95, 255, .1);
    --slate-900-a12: rgba(15, 23, 42, .12);
    --shadow-legacy-13: 0 10px 30px var(--slate-900-a12);
    --slate-900-a08: rgba(15, 23, 42, .08);
    --shadow-legacy-14: 0 1px 2px var(--slate-900-a08);
    --brand-blue-a25: rgba(11, 95, 255, .25);
    --shadow-legacy-16: 0 1px 2px var(--brand-blue-a25);
    --brand-blue-a08: rgba(11, 95, 255, .08);
    --ring-brand-blue-a08: 0 0 0 3px var(--brand-blue-a08);
    --indigo-50: #EEF2FF;
    --violet-50: #F5F3FF;
    --gray-500: #6B7280;
    --black-a05: rgba(0, 0, 0, .05);
    --indigo-600: #4F46E5;
    --gray-200: #E5E7EB;
    --emerald-100: #D1FAE5;
    --ring-brand-blue-a10: 0 0 0 3px var(--brand-blue-a10);
    --green-500-a18: rgba(34, 197, 94, .18);
    --ring-green-500-a18: 0 0 0 3px var(--green-500-a18);
    --amber-500-a14: rgba(245, 158, 11, .14);
    --ring-amber-500-a14: 0 0 0 3px var(--amber-500-a14);
    --text-xl: 22px;
    --text-3xl: 48px;
    --text-home-btn-lg: 17px;   /* btn-lg на началната (замразена, §13) */
    --text-print-doc-no: 13.5px; /* номерът в печатния списък на документите (хартията е замразена, §3.12) */
    --text-print-meta: 9pt;      /* метата под H1 в печат — както .page-bar-count в print.css (§3.12) */
    --color-print-meta: #444;    /* и цветът ѝ — неутрално сив като .page-bar-count, не синкавият от екрана */

    /* -------- Стари имена, които CSS и изгледите още ползват --------
       Без тях var() е празно и свойството тихо пада (lint, правило 9).
       Стойностите са тези, които страниците показват днес. */
    --text-secondary: #475467;
    --text-tertiary: #98A2B3;
    --color-border-subtle: rgba(0, 0, 0, .06);
    --color-danger-hover: #DC2626;
}

/* На телефон 24px отстъп от двете страни е 12% от екрана — на 390px
   документните форми и прегледът на фактурата оставаха с ~250px за
   съдържание. 16px е обичайният страничен отстъп за мобилни екрани. */
@media (max-width: 480px) {
    :root { --container-padding: 16px; }
}

/* Телефон (§1.2): H1 в заглавната лента е 22px. */
@media (max-width: 560px) {
    :root { --text-page: 22px; }
}