/*
* JNCQ Design Tokens — CSS Custom Properties
* Jana Brůnová · Chalupa family portal
* -------------------------------------------------------
* Usage:
* Then reference vars as: color: var(--color-accent);
* Dark theme: add data-theme="dark" to or any root.
* -------------------------------------------------------
* Fonts loaded separately — add to your :
*
*
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=JetBrains+Mono:wght@400;500&display=swap');
/* ── Light (default) ─────────────────────────────────── */
:root {
/* Tell the browser which theme its native UI should follow: date pickers,
the search field's clear button, scrollbars, autofill. Without this the
UA paints them light-on-light regardless of our tokens. */
color-scheme: light;
/* Fonts */
--font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
/* Surfaces */
--color-bg: #F6F4EF;
--color-bg-alt: #EFEBE3;
--color-card: #FFFFFF;
--color-sidebar-bg: #F1EDE5;
/* Borders */
--color-border: #E2DCD0;
--color-border-input: #CEC7BB;
/* Text */
--color-text: #15130F;
--color-muted: #6B6558;
--color-faint: #9A9285;
/* Accent — garnet */
--color-accent: #8B3A4E;
--color-accent-hover: #6E2C3D;
--color-accent-dim: #ECD9DD;
--color-accent-tint: rgba(139, 58, 78, 0.12);
--color-accent-line: rgba(139, 58, 78, 0.22);
/* Asset-class swatches (Majetek KPI strip / allocation) */
--cls-cp: #8B3A4E;
--cls-nem: #A6764E;
--cls-banka: #C2A878;
/* Interaction */
--color-hover-bg: #EAE4DC;
--color-input-bg: #FFFFFF;
/* Status — ok */
--color-ok: #2A6040;
--color-ok-bg: #E8F4ED;
--color-ok-border: #BEE0CF;
--color-ok-dot: #4CAF82;
/* Status — danger */
--color-danger: #C0392B;
--color-danger-bg: #F9ECEA;
--color-danger-border: #EEC8C4;
--color-danger-hover: #A93226;
/* Status — warn (document drafts / "Koncept") */
--color-warn: #B45309;
--color-warn-dot: #D08B2C;
/* File-type chips */
--color-chip-pdf-bg: #FEE2E2; --color-chip-pdf-fg: #B91C1C;
--color-chip-doc-bg: #DBEAFE; --color-chip-doc-fg: #1D4ED8;
--color-chip-xls-bg: #DCFCE7; --color-chip-xls-fg: #15803D;
--color-chip-zip-bg: #FEF3C7; --color-chip-zip-fg: #B45309;
/* Elevation */
--shadow-card: 0 1px 3px rgba(21, 19, 15, 0.06), 0 0 0 1px var(--color-border);
--shadow-pop: 0 4px 16px rgba(21, 19, 15, 0.10), 0 0 0 1px var(--color-border);
--shadow-modal: 0 12px 40px rgba(21, 19, 15, 0.18), 0 0 0 1px var(--color-border);
/* Radii */
--radius-card: 8px;
--radius-modal: 10px;
--radius-btn: 6px;
--radius-icon: 5px;
--radius-chip: 4px;
/* Spacing (4 px base) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
/* Motion */
--ease: cubic-bezier(0.2, 0, 0.2, 1);
--t-fast: 120ms;
--t-base: 150ms;
}
/* ── Dark ─────────────────────────────────────────────── */
:root[data-theme="dark"],
.theme-dark {
color-scheme: dark;
--color-bg: #15130F;
--color-bg-alt: #1C1A15;
--color-card: #221F19;
--color-sidebar-bg: #1A1813;
--color-border: #322E26;
--color-border-input: #3E3830;
--color-text: #F4F0E8;
--color-muted: #9A9588;
--color-faint: #6B6558;
--color-accent: #C76B83;
--color-accent-hover: #D98AA0;
--color-accent-dim: #3A2029;
--color-accent-tint: rgba(199, 107, 131, 0.16);
--color-accent-line: rgba(199, 107, 131, 0.30);
--color-hover-bg: #2A2620;
--color-input-bg: #221F19;
--color-ok: #7FCDA3;
--color-ok-bg: #1B2C22;
--color-ok-border: #2C4536;
--color-ok-dot: #4CAF82;
--color-danger: #E07A6E;
--color-danger-bg: #2C1B19;
--color-danger-border: #4A2A26;
--color-danger-hover: #C95C50;
--color-warn: #E3AA55;
--color-warn-dot: #D08B2C;
/* File-type chips — dark overrides (light values would bleed through otherwise) */
--color-chip-pdf-bg: rgba(200, 64, 64, 0.20); --color-chip-pdf-fg: #E7A0A0;
--color-chip-doc-bg: rgba(96, 116, 206, 0.20); --color-chip-doc-fg: #AAB8E4;
--color-chip-xls-bg: rgba(120, 158, 96, 0.20); --color-chip-xls-fg: #AECB94;
--color-chip-zip-bg: rgba(180, 130, 40, 0.20); --color-chip-zip-fg: #E3C07A;
/* Asset-class swatches — dark overrides (cp keeps the light accent hue) */
--cls-nem: #C09468;
--cls-banka: #D2BC94;
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.30), 0 0 0 1px var(--color-border);
--shadow-pop: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--color-border);
--shadow-modal: 0 12px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--color-border);
}