/*
* SackNova — Design System (2026-09-06 — Phase 10 dual-theme rebuild)
*
* This file is the single source of visual truth for SackNova. It ships:
* 1. Semantic design tokens (--sn-*) for LIGHT and DARK themes
* 2. A typography system anchored on Manrope with a strong system fallback
* 3. Bootstrap 5 component overrides that read from the tokens so the
* whole application follows the active theme with zero markup change
* 4. ERP shell overrides (appbar, sidebar, cards, tables, forms) so the
* hundreds of existing .cshtml views become theme-aware automatically
* 5. Utility classes (.ds-*, .sn-*) used by the redesigned partials
*
* Theme selection:
* → light tokens (default)
* → dark tokens
* → the theme.js bootstrap sets one of the two
* above based on prefers-color-scheme
*
* Rollback: `git checkout master` (tag pre-ui-redesign) fully reverts.
* Loading order (see _Layout / _StudentLayout / _LoginLayout):
* bootstrap.min.css → bootstrap-icons.min.css → app.css → design-system.css
* design-system.css MUST come last so its token remapping wins.
*/
/* ============================================================
0. FONT — Manrope self-hosted (optional; drop the .woff2
files into /wwwroot/fonts/manrope/ to activate; falls back
to system-ui otherwise which is still a strong choice).
============================================================ */
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400;
font-display: swap;
src: local("Manrope"),
url("/fonts/manrope/Manrope-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500;
font-display: swap;
src: local("Manrope Medium"),
url("/fonts/manrope/Manrope-Medium.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 600;
font-display: swap;
src: local("Manrope SemiBold"),
url("/fonts/manrope/Manrope-SemiBold.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 700;
font-display: swap;
src: local("Manrope Bold"),
url("/fonts/manrope/Manrope-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 800;
font-display: swap;
src: local("Manrope ExtraBold"),
url("/fonts/manrope/Manrope-ExtraBold.woff2") format("woff2");
}
/* ============================================================
1. LIGHT THEME TOKENS — the default. Cool white surfaces with
subtle blue-gray hierarchy. Deliberately restrained.
============================================================ */
:root, [data-theme="light"] {
color-scheme: light;
/* Brand — SackNova blue */
--sn-brand: #0b5cab;
--sn-brand-hover: #094a8c;
--sn-brand-active: #073c73;
--sn-brand-subtle: #e8f0fb;
--sn-brand-soft: #f0f6fd;
--sn-brand-fg: #ffffff;
--sn-brand-focus-ring: rgba(11, 92, 171, 0.20);
/* Surface hierarchy — five layered depths in cool white/blue-gray */
--sn-bg-app: #f6f8fc;
--sn-bg-surface: #ffffff;
--sn-bg-elevated: #ffffff;
--sn-bg-sunken: #eef2f8;
--sn-bg-muted: #f2f5fa;
--sn-bg-hover: #f1f5fa;
--sn-bg-selected: rgba(11, 92, 171, 0.06);
--sn-bg-code: #f5f7fb;
/* Foreground text hierarchy */
--sn-fg-primary: #0f1729; /* body */
--sn-fg-secondary: #40506b; /* secondary body */
--sn-fg-muted: #5f7189; /* muted */
--sn-fg-subtle: #8595a8; /* subtle / meta */
--sn-fg-inverse: #ffffff;
--sn-fg-link: var(--sn-brand);
--sn-fg-link-hover: var(--sn-brand-hover);
/* Borders */
--sn-border: #e2e8f0;
--sn-border-strong: #cbd5e1;
--sn-border-subtle: #eef2f7;
--sn-border-focus: var(--sn-brand);
/* Sidebar (light) — pure white rail with subtle blue-gray hover */
--sn-sidebar-bg: #ffffff;
--sn-sidebar-border: #e2e8f0;
--sn-sidebar-fg: #40506b;
--sn-sidebar-fg-strong: #0f1729;
--sn-sidebar-fg-muted: #8595a8;
--sn-sidebar-hover-bg: #f2f5fa;
--sn-sidebar-active-bg: rgba(11, 92, 171, 0.08);
--sn-sidebar-active-fg: var(--sn-brand);
--sn-sidebar-active-bar: var(--sn-brand);
--sn-sidebar-caret: #8595a8;
/* Top app-bar — refined navy gradient (stays dark in both themes for identity) */
--sn-appbar-bg: linear-gradient(120deg, #063265 0%, #0b5cab 55%, #1670c8 100%);
--sn-appbar-fg: #ffffff;
--sn-appbar-fg-muted: rgba(255, 255, 255, 0.72);
--sn-appbar-border: rgba(255, 255, 255, 0.08);
--sn-appbar-shadow: 0 1px 0 rgba(11, 92, 171, 0.35), 0 6px 24px rgba(6, 50, 101, 0.28);
--sn-appbar-control-bg: rgba(255, 255, 255, 0.10);
--sn-appbar-control-bg-hover: rgba(255, 255, 255, 0.18);
/* Semantic status */
--sn-success: #059669;
--sn-success-fg: #065f46;
--sn-success-bg: #d1fadf;
--sn-success-soft: #ecfdf5;
--sn-success-border: #a7f0c1;
--sn-warning: #d97706;
--sn-warning-fg: #92400e;
--sn-warning-bg: #fef3c7;
--sn-warning-soft: #fffbeb;
--sn-warning-border: #fcd77b;
--sn-danger: #dc2626;
--sn-danger-fg: #991b1b;
--sn-danger-bg: #fee2e2;
--sn-danger-soft: #fef2f2;
--sn-danger-border: #fca5a5;
--sn-info: #0891b2;
--sn-info-fg: #155e75;
--sn-info-bg: #cffafe;
--sn-info-soft: #ecfeff;
--sn-info-border: #67e8f9;
--sn-neutral-bg: #eef2f7;
--sn-neutral-fg: #40506b;
--sn-neutral-border: #d5dde8;
/* Elevation — light theme uses very soft shadows for depth */
--sn-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--sn-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
--sn-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
--sn-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.05);
--sn-shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.12), 0 8px 20px rgba(15, 23, 42, 0.06);
--sn-focus-ring: 0 0 0 3px var(--sn-brand-focus-ring);
/* Backdrop for modal overlays */
--sn-backdrop: rgba(15, 23, 42, 0.42);
/* Attention / warmth palette (used sparingly) */
--sn-attention-bg-1: #fff8ee;
--sn-attention-bg-2: #fff2ee;
--sn-attention-border: #f4d5a0;
--sn-attention-fg: #b45309;
/* Radius scale — subtle at small sizes, more generous for surfaces */
--sn-r-xs: 4px;
--sn-r-sm: 6px;
--sn-r-md: 10px;
--sn-r-lg: 14px;
--sn-r-xl: 20px;
--sn-r-pill: 999px;
/* Spacing — 4-pt cadence with 8-pt jumps */
--sn-s-0: 0;
--sn-s-1: 4px;
--sn-s-2: 8px;
--sn-s-3: 12px;
--sn-s-4: 16px;
--sn-s-5: 20px;
--sn-s-6: 24px;
--sn-s-8: 32px;
--sn-s-10: 40px;
--sn-s-12: 48px;
--sn-s-16: 64px;
/* Typography */
--sn-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI Variable Text",
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji";
--sn-font-mono: ui-monospace, "JetBrains Mono", "Cascadia Code",
"SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
/* Type scale (fluid at large sizes) */
--sn-fs-2xs: 0.6875rem; /* 11px */
--sn-fs-xs: 0.75rem; /* 12px */
--sn-fs-sm: 0.8125rem; /* 13px */
--sn-fs-md: 0.875rem; /* 14px ← default body */
--sn-fs-base: 0.9375rem; /* 15px ← comfortable read */
--sn-fs-lg: 1rem; /* 16px */
--sn-fs-xl: 1.125rem; /* 18px */
--sn-fs-2xl: 1.25rem; /* 20px */
--sn-fs-3xl: 1.5rem; /* 24px */
--sn-fs-4xl: 1.875rem; /* 30px */
--sn-fs-5xl: 2.25rem; /* 36px */
--sn-fs-display: 2.75rem; /* 44px */
--sn-fw-regular: 400;
--sn-fw-medium: 500;
--sn-fw-semibold: 600;
--sn-fw-bold: 700;
--sn-fw-extrabold: 800;
--sn-lh-tight: 1.15;
--sn-lh-snug: 1.3;
--sn-lh-normal: 1.5;
--sn-lh-loose: 1.7;
--sn-ls-tight: -0.02em;
--sn-ls-snug: -0.005em;
--sn-ls-normal: 0;
--sn-ls-wide: 0.04em;
--sn-ls-caps: 0.08em;
/* Motion — quick, purposeful */
--sn-t-fast: 120ms;
--sn-t-med: 180ms;
--sn-t-slow: 280ms;
--sn-ease: cubic-bezier(0.2, 0, 0, 1);
--sn-ease-emphasized: cubic-bezier(0.22, 0.9, 0.32, 1);
--sn-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
/* Layout dimensions */
--sn-appbar-height: 56px;
--sn-sidebar-width: 264px;
--sn-sidebar-collapsed: 68px;
/* Bootstrap backfill — remap Bootstrap CSS vars so legacy markup
inherits our tokens without needing !important everywhere. */
--bs-body-bg: var(--sn-bg-app);
--bs-body-color: var(--sn-fg-primary);
--bs-border-color: var(--sn-border);
--bs-body-font-family: var(--sn-font-sans);
--bs-primary: var(--sn-brand);
--bs-primary-rgb: 11, 92, 171;
/* ERP legacy backfill — the existing --erp-* tokens (used in
sidebar.css and hundreds of inline styles) now derive from
the semantic tokens so switching theme flips them too. */
--erp-primary: var(--sn-brand);
--erp-primary-dark: var(--sn-brand-active);
--erp-primary-light: #1c7bd0;
--erp-primary-lighter: var(--sn-brand-subtle);
--erp-accent: var(--sn-warning);
--erp-surface: var(--sn-bg-app);
--erp-surface-alt: var(--sn-bg-muted);
--erp-border: var(--sn-border);
--erp-text: var(--sn-fg-primary);
--erp-text-muted: var(--sn-fg-muted);
/* Legacy --ds-* backfill so anything still reading old tokens works */
--ds-surface-page: var(--sn-bg-app);
--ds-surface-card: var(--sn-bg-surface);
--ds-surface-muted: var(--sn-bg-muted);
--ds-surface-sunken: var(--sn-bg-sunken);
--ds-border-subtle: var(--sn-border-subtle);
--ds-border-strong: var(--sn-border-strong);
--ds-text-1: var(--sn-fg-primary);
--ds-text-2: var(--sn-fg-secondary);
--ds-text-3: var(--sn-fg-muted);
--ds-text-inverse: var(--sn-fg-inverse);
--ds-status-success-fg: var(--sn-success-fg);
--ds-status-success-bg: var(--sn-success-bg);
--ds-status-success-bd: var(--sn-success-border);
--ds-status-warning-fg: var(--sn-warning-fg);
--ds-status-warning-bg: var(--sn-warning-bg);
--ds-status-warning-bd: var(--sn-warning-border);
--ds-status-danger-fg: var(--sn-danger-fg);
--ds-status-danger-bg: var(--sn-danger-bg);
--ds-status-danger-bd: var(--sn-danger-border);
--ds-status-info-fg: var(--sn-info-fg);
--ds-status-info-bg: var(--sn-info-bg);
--ds-status-info-bd: var(--sn-info-border);
--ds-status-neutral-fg: var(--sn-neutral-fg);
--ds-status-neutral-bg: var(--sn-neutral-bg);
--ds-status-neutral-bd: var(--sn-neutral-border);
--ds-r-sm: var(--sn-r-sm);
--ds-r-md: var(--sn-r-md);
--ds-r-lg: var(--sn-r-lg);
--ds-r-xl: var(--sn-r-xl);
--ds-r-pill: var(--sn-r-pill);
--ds-sh-1: var(--sn-shadow-xs);
--ds-sh-2: var(--sn-shadow-sm);
--ds-sh-3: var(--sn-shadow-md);
--ds-sh-ring-primary: var(--sn-focus-ring);
--ds-sh-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.22);
--ds-sp-0: 0;
--ds-sp-1: var(--sn-s-1);
--ds-sp-2: var(--sn-s-2);
--ds-sp-3: var(--sn-s-3);
--ds-sp-4: var(--sn-s-4);
--ds-sp-5: var(--sn-s-5);
--ds-sp-6: var(--sn-s-6);
--ds-sp-7: var(--sn-s-8);
--ds-fs-xs: var(--sn-fs-xs);
--ds-fs-sm: var(--sn-fs-sm);
--ds-fs-md: var(--sn-fs-md);
--ds-fs-lg: var(--sn-fs-lg);
--ds-fs-xl: var(--sn-fs-xl);
--ds-fs-2xl: var(--sn-fs-2xl);
--ds-fw-regular: var(--sn-fw-regular);
--ds-fw-medium: var(--sn-fw-medium);
--ds-fw-semibold: var(--sn-fw-semibold);
--ds-fw-bold: var(--sn-fw-bold);
--ds-motion-fast: var(--sn-t-fast);
--ds-motion-med: var(--sn-t-med);
--ds-motion-slow: var(--sn-t-slow);
--ds-ease-standard: var(--sn-ease);
--ds-ease-emphasized: var(--sn-ease-emphasized);
/* Sidebar/appbar dimensions for legacy layout code */
--erp-sidebar-width: var(--sn-sidebar-width);
--erp-sidebar-collapsed-width: var(--sn-sidebar-collapsed);
--erp-appbar-height: var(--sn-appbar-height);
}
/* ============================================================
2. DARK THEME TOKENS — deep navy surface hierarchy. Layered
not flat. Uses subtle borders + selective shadows for depth.
============================================================ */
[data-theme="dark"] {
color-scheme: dark;
/* Brand — slightly brighter blue on dark so it reads without shouting */
--sn-brand: #6ba8f5;
--sn-brand-hover: #85b8fa;
--sn-brand-active: #a1c8fc;
--sn-brand-subtle: rgba(107, 168, 245, 0.12);
--sn-brand-soft: rgba(107, 168, 245, 0.06);
--sn-brand-fg: #0b1220;
--sn-brand-focus-ring: rgba(107, 168, 245, 0.32);
/* Surface hierarchy — deep navy, 5 layered depths */
--sn-bg-app: #0b1220;
--sn-bg-surface: #131c2e;
--sn-bg-elevated: #1a2438;
--sn-bg-sunken: #070c17;
--sn-bg-muted: #172035;
--sn-bg-hover: #1c2740;
--sn-bg-selected: rgba(107, 168, 245, 0.14);
--sn-bg-code: #131c2e;
/* Foreground text hierarchy */
--sn-fg-primary: #eef3fb;
--sn-fg-secondary: #b8c4d8;
--sn-fg-muted: #8a99b3;
--sn-fg-subtle: #64758f;
--sn-fg-inverse: #0f1729;
--sn-fg-link: var(--sn-brand);
--sn-fg-link-hover: var(--sn-brand-hover);
/* Borders */
--sn-border: #2a3550;
--sn-border-strong: #3a4767;
--sn-border-subtle: #1e2a44;
--sn-border-focus: var(--sn-brand);
/* Sidebar (dark) — deeper navy than the content area */
--sn-sidebar-bg: #0f1729;
--sn-sidebar-border: #1e2a44;
--sn-sidebar-fg: #b8c4d8;
--sn-sidebar-fg-strong: #eef3fb;
--sn-sidebar-fg-muted: #8a99b3;
--sn-sidebar-hover-bg: #1a2438;
--sn-sidebar-active-bg: rgba(107, 168, 245, 0.14);
--sn-sidebar-active-fg: var(--sn-brand);
--sn-sidebar-active-bar: var(--sn-brand);
--sn-sidebar-caret: #64758f;
/* Top app-bar — richer, slightly moodier gradient in dark */
--sn-appbar-bg: linear-gradient(120deg, #05122a 0%, #0a2a5c 55%, #0d3d8e 100%);
--sn-appbar-fg: #ffffff;
--sn-appbar-fg-muted: rgba(255, 255, 255, 0.70);
--sn-appbar-border: rgba(255, 255, 255, 0.06);
--sn-appbar-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 6px 24px rgba(0, 0, 0, 0.5);
--sn-appbar-control-bg: rgba(255, 255, 255, 0.08);
--sn-appbar-control-bg-hover: rgba(255, 255, 255, 0.14);
/* Semantic status — tuned for dark bg legibility */
--sn-success: #34d399;
--sn-success-fg: #6ee7b7;
--sn-success-bg: rgba(52, 211, 153, 0.14);
--sn-success-soft: rgba(52, 211, 153, 0.06);
--sn-success-border: rgba(52, 211, 153, 0.30);
--sn-warning: #fbbf24;
--sn-warning-fg: #fde68a;
--sn-warning-bg: rgba(251, 191, 36, 0.14);
--sn-warning-soft: rgba(251, 191, 36, 0.06);
--sn-warning-border: rgba(251, 191, 36, 0.30);
--sn-danger: #f87171;
--sn-danger-fg: #fca5a5;
--sn-danger-bg: rgba(248, 113, 113, 0.14);
--sn-danger-soft: rgba(248, 113, 113, 0.06);
--sn-danger-border: rgba(248, 113, 113, 0.30);
--sn-info: #22d3ee;
--sn-info-fg: #67e8f9;
--sn-info-bg: rgba(34, 211, 238, 0.14);
--sn-info-soft: rgba(34, 211, 238, 0.06);
--sn-info-border: rgba(34, 211, 238, 0.30);
--sn-neutral-bg: rgba(148, 163, 184, 0.14);
--sn-neutral-fg: #cbd5e1;
--sn-neutral-border: rgba(148, 163, 184, 0.30);
/* Elevation — dark uses layered surfaces + very subtle top-light shadows */
--sn-shadow-xs: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
--sn-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
--sn-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
--sn-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
--sn-shadow-xl: 0 32px 60px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
/* Modal backdrop deeper */
--sn-backdrop: rgba(0, 0, 0, 0.68);
--sn-attention-bg-1: rgba(251, 191, 36, 0.08);
--sn-attention-bg-2: rgba(248, 113, 113, 0.06);
--sn-attention-border: rgba(251, 191, 36, 0.28);
--sn-attention-fg: #fbbf24;
/* Bootstrap backfill overrides */
--bs-body-bg: var(--sn-bg-app);
--bs-body-color: var(--sn-fg-primary);
--bs-border-color: var(--sn-border);
--bs-primary: var(--sn-brand);
--bs-primary-rgb: 107, 168, 245;
--bs-tertiary-bg: var(--sn-bg-muted);
--bs-secondary-bg: var(--sn-bg-elevated);
/* Legacy --erp-* backfill (dark) */
--erp-primary: var(--sn-brand);
--erp-primary-dark: #094a8c;
--erp-primary-light: var(--sn-brand-hover);
--erp-primary-lighter: var(--sn-brand-subtle);
--erp-surface: var(--sn-bg-app);
--erp-surface-alt: var(--sn-bg-muted);
--erp-border: var(--sn-border);
--erp-text: var(--sn-fg-primary);
--erp-text-muted: var(--sn-fg-muted);
/* Legacy --ds-* backfill (dark) */
--ds-surface-page: var(--sn-bg-app);
--ds-surface-card: var(--sn-bg-surface);
--ds-surface-muted: var(--sn-bg-muted);
--ds-surface-sunken: var(--sn-bg-sunken);
--ds-border-subtle: var(--sn-border-subtle);
--ds-border-strong: var(--sn-border-strong);
--ds-text-1: var(--sn-fg-primary);
--ds-text-2: var(--sn-fg-secondary);
--ds-text-3: var(--sn-fg-muted);
--ds-status-success-fg: var(--sn-success-fg);
--ds-status-success-bg: var(--sn-success-bg);
--ds-status-success-bd: var(--sn-success-border);
--ds-status-warning-fg: var(--sn-warning-fg);
--ds-status-warning-bg: var(--sn-warning-bg);
--ds-status-warning-bd: var(--sn-warning-border);
--ds-status-danger-fg: var(--sn-danger-fg);
--ds-status-danger-bg: var(--sn-danger-bg);
--ds-status-danger-bd: var(--sn-danger-border);
--ds-status-info-fg: var(--sn-info-fg);
--ds-status-info-bg: var(--sn-info-bg);
--ds-status-info-bd: var(--sn-info-border);
--ds-sh-1: var(--sn-shadow-xs);
--ds-sh-2: var(--sn-shadow-sm);
--ds-sh-3: var(--sn-shadow-md);
--ds-sh-ring-primary: var(--sn-focus-ring);
}
/* ============================================================
3. BASE — body, headings, links, focus, selection, scrollbars.
All values derived from tokens so they flip with the theme.
============================================================ */
html {
background: var(--sn-bg-app);
color: var(--sn-fg-primary);
}
body {
font-family: var(--sn-font-sans);
font-size: var(--sn-fs-md);
font-weight: var(--sn-fw-regular);
line-height: var(--sn-lh-normal);
color: var(--sn-fg-primary);
background: var(--sn-bg-app);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "cv11", "ss01", "ss03";
}
/* Selection */
::selection {
background: var(--sn-brand);
color: var(--sn-brand-fg);
}
/* Scrollbar — subtle track that follows theme */
* { scrollbar-color: var(--sn-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--sn-border-strong);
border-radius: var(--sn-r-pill);
border: 2px solid var(--sn-bg-app);
}
::-webkit-scrollbar-thumb:hover { background: var(--sn-fg-subtle); }
/* Headings — Manrope reads especially well in these weights + tracking */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: var(--sn-font-sans);
color: var(--sn-fg-primary);
font-weight: var(--sn-fw-bold);
letter-spacing: var(--sn-ls-snug);
line-height: var(--sn-lh-snug);
margin-bottom: var(--sn-s-3);
}
h1, .h1 { font-size: var(--sn-fs-4xl); letter-spacing: var(--sn-ls-tight); line-height: var(--sn-lh-tight); }
h2, .h2 { font-size: var(--sn-fs-3xl); letter-spacing: var(--sn-ls-tight); }
h3, .h3 { font-size: var(--sn-fs-2xl); }
h4, .h4 { font-size: var(--sn-fs-xl); }
h5, .h5 { font-size: var(--sn-fs-lg); }
h6, .h6 { font-size: var(--sn-fs-md); }
/* Page-title patterns used across the app — Title
.
Give them their own confident size so a page header reads as one. */
h1.h5, h1.h6 {
font-size: 1.25rem;
font-weight: var(--sn-fw-bold);
letter-spacing: var(--sn-ls-snug);
line-height: var(--sn-lh-snug);
color: var(--sn-fg-primary);
margin-bottom: 2px;
}
h1.h4 {
font-size: var(--sn-fs-2xl);
font-weight: var(--sn-fw-bold);
letter-spacing: var(--sn-ls-tight);
line-height: var(--sn-lh-tight);
color: var(--sn-fg-primary);
}
h1.h5 > .bi, h1.h6 > .bi, h1.h4 > .bi {
color: var(--sn-brand);
margin-right: 0.4em;
}
/* Links */
a { color: var(--sn-fg-link); text-decoration: none; transition: color var(--sn-t-fast) var(--sn-ease); }
a:hover { color: var(--sn-fg-link-hover); text-decoration: underline; text-underline-offset: 2px; }
a.text-decoration-none:hover { text-decoration: none; }
/* Muted helpers */
.text-muted { color: var(--sn-fg-muted) !important; }
.text-secondary { color: var(--sn-fg-secondary) !important; }
.small, small { color: inherit; font-size: var(--sn-fs-sm); }
/* Code + monospace */
code, kbd, samp, pre {
font-family: var(--sn-font-mono);
font-size: 0.9em;
}
code {
padding: 1px 5px;
background: var(--sn-bg-code);
color: var(--sn-brand);
border-radius: var(--sn-r-xs);
border: 1px solid var(--sn-border-subtle);
}
/* Numbers — tabular figures + slightly tighter tracking for tables/dashboards */
.sn-tabular, td, .h1, .h2, .h3, .h4 {
font-variant-numeric: tabular-nums;
}
/* Universal focus ring — brand color halo, works in both themes */
:where(a, button, [role="button"], input, select, textarea, .form-control, .form-select, .btn):focus-visible {
outline: none;
box-shadow: var(--sn-focus-ring);
border-color: var(--sn-border-focus);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
:root, [data-theme="dark"] {
--sn-t-fast: 0ms;
--sn-t-med: 0ms;
--sn-t-slow: 0ms;
}
}
/* Theme transition — subtle so it doesn't feel jarring on toggle */
html.sn-theme-switching, html.sn-theme-switching * {
transition: background-color var(--sn-t-med) var(--sn-ease),
color var(--sn-t-med) var(--sn-ease),
border-color var(--sn-t-med) var(--sn-ease) !important;
}
/* ============================================================
4. BOOTSTRAP COMPONENT OVERRIDES — all values from tokens.
============================================================ */
/* --- Buttons -------------------------------------------------- */
.btn {
font-family: var(--sn-font-sans);
font-weight: var(--sn-fw-semibold);
font-size: var(--sn-fs-md);
padding: 0.45rem 0.9rem;
border-radius: var(--sn-r-sm);
letter-spacing: -0.005em;
transition: background-color var(--sn-t-fast) var(--sn-ease),
border-color var(--sn-t-fast) var(--sn-ease),
box-shadow var(--sn-t-fast) var(--sn-ease),
transform var(--sn-t-fast) var(--sn-ease),
color var(--sn-t-fast) var(--sn-ease);
}
.btn-sm { font-size: var(--sn-fs-sm); padding: 0.32rem 0.7rem; }
.btn-lg { font-size: var(--sn-fs-lg); padding: 0.62rem 1.1rem; }
.btn-icon { padding: 0.32rem 0.42rem; line-height: 1; }
.btn-primary {
background: var(--sn-brand);
border-color: var(--sn-brand);
color: var(--sn-brand-fg);
box-shadow: 0 1px 2px rgba(11, 92, 171, 0.18);
}
.btn-primary:hover, .btn-primary:focus {
background: var(--sn-brand-hover);
border-color: var(--sn-brand-hover);
color: var(--sn-brand-fg);
box-shadow: 0 4px 12px rgba(11, 92, 171, 0.28);
transform: translateY(-1px);
}
.btn-primary:active, .btn-primary.active {
background: var(--sn-brand-active);
border-color: var(--sn-brand-active);
color: var(--sn-brand-fg);
transform: translateY(0);
box-shadow: 0 1px 2px rgba(11, 92, 171, 0.18);
}
.btn-primary:disabled, .btn-primary.disabled { opacity: 0.55; box-shadow: none; transform: none; }
.btn-outline-primary { color: var(--sn-brand); border-color: var(--sn-brand); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus {
background: var(--sn-brand);
border-color: var(--sn-brand);
color: var(--sn-brand-fg);
}
.btn-outline-secondary {
color: var(--sn-fg-secondary);
border-color: var(--sn-border-strong);
background: transparent;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
background: var(--sn-bg-hover);
border-color: var(--sn-border-strong);
color: var(--sn-fg-primary);
}
.btn-outline-success { color: var(--sn-success); border-color: var(--sn-success); }
.btn-outline-success:hover { background: var(--sn-success); color: #fff; }
.btn-outline-warning { color: var(--sn-warning); border-color: var(--sn-warning); }
.btn-outline-warning:hover { background: var(--sn-warning); color: #fff; }
.btn-outline-danger { color: var(--sn-danger); border-color: var(--sn-danger); }
.btn-outline-danger:hover { background: var(--sn-danger); color: #fff; }
.btn-outline-info { color: var(--sn-info); border-color: var(--sn-info); }
.btn-outline-info:hover { background: var(--sn-info); color: #fff; }
.btn-outline-dark {
color: var(--sn-fg-primary);
border-color: var(--sn-border-strong);
}
.btn-outline-dark:hover {
background: var(--sn-fg-primary);
color: var(--sn-fg-inverse);
border-color: var(--sn-fg-primary);
}
.btn-success { background: var(--sn-success); border-color: var(--sn-success); color: #fff; }
.btn-warning { background: var(--sn-warning); border-color: var(--sn-warning); color: #fff; }
.btn-danger { background: var(--sn-danger); border-color: var(--sn-danger); color: #fff; }
.btn-info { background: var(--sn-info); border-color: var(--sn-info); color: #fff; }
.btn-secondary {
background: var(--sn-bg-elevated);
border-color: var(--sn-border-strong);
color: var(--sn-fg-primary);
}
.btn-secondary:hover { background: var(--sn-bg-hover); color: var(--sn-fg-primary); }
.btn-link {
color: var(--sn-fg-link);
text-decoration: none;
padding: 0.28rem 0.4rem;
}
.btn-link:hover { color: var(--sn-fg-link-hover); background: var(--sn-bg-hover); }
.btn-link.text-primary { color: var(--sn-brand) !important; }
.btn-link.text-danger { color: var(--sn-danger) !important; }
.btn-link.text-success { color: var(--sn-success) !important; }
.btn-link.text-warning { color: var(--sn-warning) !important; }
.btn-link.text-muted { color: var(--sn-fg-muted) !important; }
.btn-link.text-info { color: var(--sn-info) !important; }
.btn-link.text-dark { color: var(--sn-fg-primary) !important; }
/* --- Forms / inputs ------------------------------------------ */
/* Use background-color (not the "background" shorthand) so Bootstrap's
chevron SVG on .form-select survives our theme. The shorthand would
reset background-image to none and strip the down-arrow. */
.form-control, .form-select, textarea.form-control {
background-color: var(--sn-bg-surface);
color: var(--sn-fg-primary);
border: 1px solid var(--sn-border-strong);
border-radius: var(--sn-r-sm);
padding: 0.42rem 0.7rem;
font-size: var(--sn-fs-md);
line-height: 1.4;
transition: border-color var(--sn-t-fast) var(--sn-ease),
background-color var(--sn-t-fast) var(--sn-ease),
box-shadow var(--sn-t-fast) var(--sn-ease);
}
/* Reserve room for the chevron so long option text never overlaps it.
Bootstrap's baseline padding-right is 2.25rem; matched here. Sizes
below adjust for -sm / -lg variants. */
.form-select { padding-right: 2.25rem; }
.form-select-sm { padding-right: 2rem; }
.form-select-lg { padding-right: 2.5rem; }
.form-control::placeholder { color: var(--sn-fg-subtle); }
.form-control:hover, .form-select:hover { border-color: var(--sn-fg-subtle); }
.form-control:focus, .form-select:focus {
background-color: var(--sn-bg-surface);
color: var(--sn-fg-primary);
border-color: var(--sn-brand);
box-shadow: var(--sn-focus-ring);
}
.form-control-sm, .form-select-sm { font-size: var(--sn-fs-sm); padding-top: 0.32rem; padding-bottom: 0.32rem; padding-left: 0.55rem; }
.form-control-lg, .form-select-lg { font-size: var(--sn-fs-lg); padding-top: 0.55rem; padding-bottom: 0.55rem; padding-left: 0.9rem; }
.form-control:disabled, .form-control[readonly],
.form-select:disabled {
background-color: var(--sn-bg-muted);
color: var(--sn-fg-muted);
opacity: 1;
}
.form-label {
font-size: var(--sn-fs-sm);
font-weight: var(--sn-fw-medium);
color: var(--sn-fg-secondary);
margin-bottom: var(--sn-s-1);
letter-spacing: 0;
}
.form-label.text-muted { color: var(--sn-fg-secondary) !important; }
.form-text { font-size: var(--sn-fs-xs); color: var(--sn-fg-muted); }
.input-group-text {
background: var(--sn-bg-muted);
color: var(--sn-fg-muted);
border-color: var(--sn-border-strong);
font-size: var(--sn-fs-md);
}
.form-check-input {
background-color: var(--sn-bg-surface);
border-color: var(--sn-border-strong);
}
.form-check-input:checked {
background-color: var(--sn-brand);
border-color: var(--sn-brand);
}
.form-check-input:focus { border-color: var(--sn-brand); box-shadow: var(--sn-focus-ring); }
.form-check-label { color: var(--sn-fg-primary); font-size: var(--sn-fs-md); }
.form-switch .form-check-input { background-color: var(--sn-bg-muted); border-color: var(--sn-border-strong); }
.form-switch .form-check-input:checked { background-color: var(--sn-brand); border-color: var(--sn-brand); }
/* Required / optional label utilities preserved from Phase 5 */
.form-label.ds-required::after {
content: "*";
color: var(--sn-danger);
margin-left: 2px;
font-weight: var(--sn-fw-bold);
}
.form-label.ds-optional::after {
content: " (optional)";
color: var(--sn-fg-subtle);
font-weight: var(--sn-fw-regular);
font-size: 0.85em;
}
/* --- Cards --------------------------------------------------- */
.card {
background: var(--sn-bg-surface);
color: var(--sn-fg-primary);
border: 1px solid var(--sn-border);
border-radius: var(--sn-r-md);
box-shadow: none;
transition: box-shadow var(--sn-t-med) var(--sn-ease),
border-color var(--sn-t-med) var(--sn-ease),
transform var(--sn-t-med) var(--sn-ease);
}
.card.shadow-sm { box-shadow: var(--sn-shadow-sm) !important; }
.card.shadow { box-shadow: var(--sn-shadow-md) !important; }
.card.shadow-lg { box-shadow: var(--sn-shadow-lg) !important; }
.card.border-0 { border-color: transparent !important; }
.card > .card-header,
.card > .card-body,
.card > .card-footer { padding: var(--sn-s-4) var(--sn-s-5); }
.card > .card-header {
background: transparent;
border-bottom: 1px solid var(--sn-border);
color: var(--sn-fg-primary);
font-weight: var(--sn-fw-semibold);
}
.card > .card-footer {
background: transparent;
border-top: 1px solid var(--sn-border);
color: var(--sn-fg-secondary);
}
.card .card { box-shadow: none !important; }
/* Card hover lift for shadow-sm */
.card.shadow-sm:hover { box-shadow: var(--sn-shadow-md) !important; }
.card[data-tile]:hover, .card.card-hover:hover {
transform: translateY(-2px);
box-shadow: var(--sn-shadow-lg) !important;
border-color: var(--sn-border-strong);
}
/* --- Tables --------------------------------------------------- */
.table {
--bs-table-bg: transparent;
--bs-table-color: var(--sn-fg-primary);
--bs-table-border-color: var(--sn-border-subtle);
--bs-table-striped-bg: var(--sn-bg-muted);
--bs-table-striped-color: var(--sn-fg-primary);
--bs-table-hover-bg: var(--sn-bg-hover);
--bs-table-hover-color: var(--sn-fg-primary);
color: var(--sn-fg-primary);
background: transparent;
margin-bottom: 0;
}
.table > thead > tr > th {
background: var(--sn-bg-muted);
color: var(--sn-fg-muted);
font-size: var(--sn-fs-xs);
font-weight: var(--sn-fw-semibold);
text-transform: uppercase;
letter-spacing: var(--sn-ls-caps);
border-bottom: 1px solid var(--sn-border);
padding: var(--sn-s-3) var(--sn-s-3);
white-space: nowrap;
}
.table > thead > tr > th a {
color: var(--sn-fg-muted) !important;
text-decoration: none;
}
.table > thead > tr > th a:hover { color: var(--sn-fg-primary) !important; }
.table > tbody > tr > td {
background: var(--sn-bg-surface);
color: var(--sn-fg-primary);
border-color: var(--sn-border-subtle);
padding: var(--sn-s-3) var(--sn-s-3);
vertical-align: middle;
font-size: var(--sn-fs-md);
}
.table > tbody > tr > td code {
background: var(--sn-bg-muted);
color: var(--sn-fg-primary);
border-color: var(--sn-border);
}
.table-hover > tbody > tr > td {
transition: background-color var(--sn-t-fast) var(--sn-ease),
box-shadow var(--sn-t-fast) var(--sn-ease);
}
.table-hover > tbody > tr:hover > td {
background: var(--sn-bg-hover);
}
.table-hover > tbody > tr:hover > td:first-child {
box-shadow: inset 3px 0 0 var(--sn-brand);
}
.table-light,
.table > :not(caption) > * > .table-light {
--bs-table-bg: var(--sn-bg-muted);
--bs-table-color: var(--sn-fg-primary);
}
.table thead.table-light { background: transparent; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: var(--sn-bg-muted); }
.table-bordered { border-color: var(--sn-border); }
.table-bordered > :not(caption) > * > * { border-color: var(--sn-border); }
.table-sm > thead > tr > th,
.table-sm > tbody > tr > td { padding: var(--sn-s-1) var(--sn-s-2); font-size: var(--sn-fs-sm); }
/* --- Badges & chips ------------------------------------------ */
.badge {
font-family: var(--sn-font-sans);
font-weight: var(--sn-fw-semibold);
font-size: 0.72rem;
letter-spacing: 0.02em;
padding: 0.35em 0.6em;
border-radius: var(--sn-r-sm);
}
.bg-primary { background: var(--sn-brand) !important; color: #fff !important; }
.bg-success { background: var(--sn-success) !important; color: #fff !important; }
.bg-warning { background: var(--sn-warning) !important; color: #fff !important; }
.bg-danger { background: var(--sn-danger) !important; color: #fff !important; }
.bg-info { background: var(--sn-info) !important; color: #fff !important; }
.bg-secondary { background: var(--sn-fg-secondary) !important; color: #fff !important; }
.bg-dark { background: var(--sn-fg-primary) !important; color: var(--sn-fg-inverse) !important; }
.bg-light { background: var(--sn-bg-muted) !important; color: var(--sn-fg-primary) !important; }
/* .bg-white / .text-black are Bootstrap LITERAL utilities — they render pure
white / pure black regardless of theme. In dark mode that leaks white-on-
white when a view hardcodes e.g.