/* ============================================================ Light Theme — Graphite Minimal (Apple-grade) Applied when is set Design principle: - Monochrome. Surfaces white, page Apple-gray #F5F5F7. - Text + interactive accent = graphite ink #1D1D1F. - NO brand color. Hairline borders. Semantic green/red kept only for validation / trend deltas. ============================================================ */ :root.theme-azure-light { /* ── Base background ────────────────────────────────────── */ --bs-body-bg: #f5f5f7; --bs-body-bg-rgb: 245, 245, 247; --bs-body-color: #1d1d1f; --bs-body-color-rgb: 29, 29, 31; /* ── Bootstrap system ───────────────────────────────────── */ --bs-emphasis-color: #000000; --bs-secondary-color: #6e6e73; --bs-tertiary-color: #86868b; --bs-secondary-bg: #ececee; --bs-tertiary-bg: #f2f2f4; --bs-heading-color: #1d1d1f; --bs-border-color: rgba(0, 0, 0, 0.10); --bs-border-color-translucent: rgba(0, 0, 0, 0.06); /* ── Links — ink, affordance via weight/underline ───────── */ --bs-link-color: #1d1d1f; --bs-link-hover-color: #000000; --bs-link-color-rgb: 29, 29, 31; --bs-link-hover-color-rgb: 0, 0, 0; /* ── Primary accent — graphite ink ───────────────────────── */ --bs-primary: #1d1d1f; --bs-primary-rgb: 29, 29, 31; --bs-primary-text-emphasis: #000000; --bs-primary-bg-subtle: #f0f0f2; --bs-primary-border-subtle: #d2d2d7; --accent-color: #1d1d1f; /* ── Info — used for .category-title in common-theme ─────── */ --bs-info-text-emphasis: #86868b; /* ── Form validation (semantic — kept) ──────────────────── */ --bs-form-valid-color: #1a7f37; --bs-form-valid-border-color: #1a7f37; --bs-form-invalid-color: #cf222e; --bs-form-invalid-border-color: #cf222e; /* ── Row / grid ─────────────────────────────────────────── */ --s-group-row-bg: rgba(0, 0, 0, 0.022); --s-alt-row-bg: rgba(0, 0, 0, 0.015); --s-row-bg-hover: rgba(0, 0, 0, 0.04); /* ── Cards ──────────────────────────────────────────────── */ --s-card-solid-bg: #ffffff; --s-card-bg: rgba(255, 255, 255, 0.94); --s-card-border: rgba(0, 0, 0, 0.08); --s-card-title: #1d1d1f; --s-bright-rgb: 0, 0, 0; /* ── Category ───────────────────────────────────────────── */ --s-category-title: #86868b; --s-category-border: rgba(0, 0, 0, 0.10); --s-category-divider: rgba(0, 0, 0, 0.07); /* ── Column headers ─────────────────────────────────────── */ --s-column-header: #86868b; --s-column-header-hover-bg: rgba(0, 0, 0, 0.04); --s-column-header-border: rgba(0, 0, 0, 0.08); --s-column-footer: #1d1d1f; /* ── State ──────────────────────────────────────────────── */ --s-deleted: #a1a1a6; --s-disabled: #a1a1a6; --s-inactive: #a1a1a6; /* ── Inputs ─────────────────────────────────────────────── */ --s-input-bg: #ffffff; --s-input-text: #1d1d1f; --s-input-clear: #cf222e; --s-input-dirty-bg: #fbf3f3; --s-input-outline: rgba(0, 0, 0, 0.16); --s-input-outline-error: rgba(207, 34, 46, 0.20); --s-input-readonly-bg: #f5f5f7; /* ── UI elements ────────────────────────────────────────── */ --s-no-results: #86868b; --s-modal-shadow: var(--s-shadow-xl); --s-pager-icon: #86868b; --s-pager-text: #86868b; --s-placeholder: #a1a1a6; /* ── Scrollbar ──────────────────────────────────────────── */ --s-scroll-thumb: rgba(0, 0, 0, 0.18); --s-scroll-thumb-hover: rgba(0, 0, 0, 0.32); --s-scroll-track: transparent; /* ── Sidebar ────────────────────────────────────────────── */ --s-sidebar-bg: rgba(255, 255, 255, 0.98); --s-sidebar-band-bg: rgba(255, 255, 255, 0.85); --s-sidebar-band-link: rgba(0, 0, 0, 0.45); --s-sidebar-band-link-active: #1d1d1f; --s-sidebar-band-title: #1d1d1f; --s-sidebar-band-title2: #1d1d1f; --s-sidebar-icon: #6e6e73; --s-sidebar-icon-active: #1d1d1f; --s-sidebar-link: #424245; --s-sidebar-link-active: #1d1d1f; /* ── Cell borders ───────────────────────────────────────── */ --s-cell-border: rgba(0, 0, 0, 0.06); --s-cell-input-border: rgba(0, 0, 0, 0.14); /* ── Sidebar active — neutral gray fill + ink text ───────── */ --s-sidebar-active-bg: rgba(0, 0, 0, 0.055); --s-sidebar-active-color: #1d1d1f; /* ── Tabs ───────────────────────────────────────────────── */ --s-tabs-border: rgba(0, 0, 0, 0.10); --s-tabs-border-active: #1d1d1f; --s-tabs-text: #86868b; --s-tabs-text-active: #1d1d1f; /* ── Tool icons ─────────────────────────────────────────── */ --s-tool-icon: #6e6e73; /* ── Chips ──────────────────────────────────────────────── */ --s-chip-bg: rgba(0, 0, 0, 0.05); --s-chip-bg-hover: rgba(0, 0, 0, 0.09); /* ── Logo ───────────────────────────────────────────────── */ --s-site-logo-img-url: url(../../assets/images/logo/sps.png); --s-site-logo-img-filter: none; /* ── Shadows ────────────────────────────────────────────── */ --s-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04); --s-modal-shadow: 0 24px 60px rgba(0, 0, 0, 0.14), 0 6px 18px rgba(0, 0, 0, 0.07); } /* ── Page background — clean Apple gray, no color ─────────── */ .theme-azure-light #PageBackground { position: fixed; inset: 0; z-index: -10000; display: block !important; background: linear-gradient(180deg, #f5f5f7 0%, #f2f2f4 100%); overflow: hidden; }