/* datega WG – Design Tokens - Central place for typography, spacing, radii and theme colors. - Theme switching is done via . - Density switching is done via . */ :root{ /* Typography */ --app-font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --app-font-size: 14px; --app-font-size-sm: 12px; --app-font-size-lg: 15px; --app-line-height: 1.4; /* Headings */ --app-h1: 24px; --app-h2: 20px; --app-h3: 18px; --app-h4: 16px; --app-h5: 15px; --app-h6: 14px; /* Spacing */ --app-space-1: .25rem; --app-space-2: .5rem; --app-space-3: .75rem; --app-space-4: 1rem; --app-space-5: 1.25rem; --app-space-6: 1.5rem; /* Radii / shadows */ --app-radius-sm: 10px; --app-radius-md: 14px; --app-radius-lg: 18px; --app-shadow-sm: 0 1px 2px rgba(15,23,42,.06); --app-shadow-md: 0 10px 28px rgba(15,23,42,.12); /* Controls */ --app-control-height: 36px; --app-control-radius: 12px; --app-btn-icon-size: 34px; --app-btn-icon-radius: 12px; /* Layout */ --app-sidebar-width: 264px; --app-topbar-height: 60px; --app-footer-height: 44px; /* Brand */ --brand-primary: #0d6efd; --brand-secondary: #6c757d; /* Semantic accents */ --app-primary: var(--brand-primary); --app-success: #198754; --app-warning: #f59e0b; --app-danger: #dc3545; --app-info: #0dcaf0; } /* Comfortable density (default) */ :root[data-density="comfortable"]{ --app-control-height: 36px; --app-btn-icon-size: 34px; } /* Compact density */ :root[data-density="compact"]{ --app-font-size: 14px; --app-control-height: 32px; --app-control-radius: 10px; --app-btn-icon-size: 30px; --app-btn-icon-radius: 10px; } /* Theme: Light */ :root[data-theme="light"]{ --app-bg: #f6f7fb; --app-surface: #ffffff; --app-surface-2: #fbfbfd; --app-border: rgba(15, 23, 42, .10); --app-text: #0f172a; --app-text-rgb: 15, 23, 42; --app-muted: rgba(15, 23, 42, .65); --app-muted-rgb: 15, 23, 42; --app-link: var(--app-primary); --app-focus-ring: rgba(13,110,253,.25); /* Bootstrap bridge */ --bs-body-bg: var(--app-bg); --bs-body-color: var(--app-text); --bs-border-color: var(--app-border); --bs-link-color: var(--app-link); --bs-link-hover-color: color-mix(in srgb, var(--app-link) 80%, #000); --bs-secondary-color: var(--app-muted); --bs-tertiary-bg: var(--app-surface-2); } /* Map tokens to Bootstrap variables (improves Dark Mode across Bootstrap components) */ :root{ --bs-body-font-family: var(--app-font-family); --bs-body-font-size: var(--app-font-size); --bs-body-bg: var(--app-bg); --bs-body-color: var(--app-text); --bs-border-color: var(--app-border); --bs-link-color: var(--app-primary); --bs-link-hover-color: color-mix(in srgb, var(--app-primary) 85%, black); --bs-secondary-color: var(--app-muted); --bs-tertiary-color: color-mix(in srgb, var(--app-muted) 75%, transparent); --bs-secondary-bg: var(--app-surface-2); --bs-tertiary-bg: var(--app-surface-2); --bs-card-bg: var(--app-surface); --bs-card-cap-bg: var(--app-surface-2); --bs-dropdown-bg: var(--app-surface); --bs-modal-bg: var(--app-surface); --bs-popover-bg: var(--app-surface); --bs-tooltip-bg: color-mix(in srgb, var(--app-text) 92%, transparent); } /* Theme: Dark – tuned for contrast and "surface" layers */ :root[data-theme="dark"]{ --app-bg: #0b1220; --app-surface: #111a2c; --app-surface-2: #0e1626; --app-border: rgba(226, 232, 240, .12); --app-text: #e6edf6; --app-text-rgb: 230, 237, 246; --app-muted: rgba(230, 237, 246, .70); --app-muted-rgb: 230, 237, 246; --app-link: color-mix(in srgb, var(--app-primary) 85%, #fff); --app-focus-ring: rgba(13,110,253,.35); /* Bootstrap bridge */ --bs-body-bg: var(--app-bg); --bs-body-color: var(--app-text); --bs-border-color: var(--app-border); --bs-link-color: var(--app-link); --bs-link-hover-color: color-mix(in srgb, var(--app-link) 85%, #fff); --bs-secondary-color: var(--app-muted); --bs-tertiary-bg: var(--app-surface-2); /* Dark surfaces */ --bs-card-bg: var(--app-surface); --bs-modal-bg: var(--app-surface); } /* Auto mode helper: if someone sets data-theme="auto" in future */ @media (prefers-color-scheme: dark){ :root[data-theme="auto"]{ --app-bg: #0b1220; --app-surface: #111a2c; --app-surface-2: #0e1626; --app-border: rgba(226, 232, 240, .12); --app-text: #e6edf6; --app-text-rgb: 230, 237, 246; --app-muted: rgba(230, 237, 246, .70); --app-muted-rgb: 230, 237, 246; --app-link: color-mix(in srgb, var(--app-primary) 85%, #fff); --app-focus-ring: rgba(13,110,253,.35); --bs-body-bg: var(--app-bg); --bs-body-color: var(--app-text); --bs-border-color: var(--app-border); --bs-link-color: var(--app-link); --bs-link-hover-color: color-mix(in srgb, var(--app-link) 85%, #fff); --bs-secondary-color: var(--app-muted); --bs-tertiary-bg: var(--app-surface-2); --bs-card-bg: var(--app-surface); --bs-modal-bg: var(--app-surface); } }