/* ========================================================= AVGC — brand tokens + semantic theme (data-theme on ) Font: Verdana | Colors: #ed1d24, #697279, #ebebec, #ffffff ========================================================= */ :root { --red: #ed1d24; --color-primary: #ed1d24; --color-grey1: #697279; --color-grey2: #ebebec; --color-bg: #ffffff; --color-text: #000000; --font-verdana: Verdana, Geneva, sans-serif; --font-body: var(--font-verdana); --font-heading-primary: var(--font-verdana); --font-heading-secondary: var(--font-verdana); --font-accent: var(--font-verdana); --font-base: var(--font-verdana); --font-sans: var(--font-verdana); --font-display: var(--font-verdana); --white: #ffffff; --black: #000000; --red-soft: rgba(237, 29, 36, 0.12); --white-soft: rgba(255, 255, 255, 0.08); --black-soft: rgba(0, 0, 0, 0.6); /* Attendance / status — brand palette only */ --status-present: #22c55e; --status-leave: #4b5563; --status-halfday: #d1d5db; --status-absent: var(--color-primary); --cal-present: #22c55e; --cal-present-bg: rgba(34, 197, 94, 0.2); --cal-absent: #ed1d24; --cal-absent-bg: rgba(237, 29, 36, 0.14); --cal-halfday: #f97316; --cal-halfday-bg: rgba(249, 115, 22, 0.22); --cal-leave: #4b5563; --cal-leave-bg: rgba(75, 85, 99, 0.38); --primary: var(--red); --primary-hover: var(--red); --primary-soft: var(--red-soft); --danger: var(--red); --danger-soft: var(--red-soft); --success: var(--color-grey1); --success-soft: rgba(105, 114, 121, 0.12); --warning: var(--color-primary); --warning-soft: var(--red-soft); --info: var(--color-grey1); --info-soft: rgba(105, 114, 121, 0.12); --pending: var(--red); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.06); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08); --sidebar-width: 268px; --sidebar-collapsed: 72px; --sidebar-float-left: 12px; --sidebar-float-width: 84px; --sidebar-float-gap: 12px; --sidebar-float-offset: calc(var(--sidebar-float-left) + var(--sidebar-float-width) + var(--sidebar-float-gap)); --navbar-height: 64px; --transition: 0.2s ease; } html { transition: background-color 0.3s ease, color 0.3s ease; } /* ---------- Light theme ---------- */ [data-theme="light"] { --bg-primary: var(--color-grey2); --bg-secondary: var(--color-grey2); --bg-card: var(--white); --text-primary: var(--color-text); --text-muted: var(--color-grey1); --text-subtle: #5c656d; --border: rgba(105, 114, 121, 0.28); --table-head-bg: var(--color-grey2); --table-head-text: var(--text-primary); --table-row-alt: var(--bg-card); --table-row-hover: rgba(237, 29, 36, 0.08); --placeholder: #6b7280; --badge-halfday: #b45309; --badge-absent: #c41e24; --bg: var(--bg-primary); --bg-elevated: var(--bg-card); --surface: var(--bg-card); --marketing-surface: var(--white); --marketing-dark: var(--black); --text: var(--text-primary); --sidebar-bg: rgba(255, 255, 255, 0.92); --sidebar-text: var(--color-text); --sidebar-muted: var(--color-grey1); --sidebar-hover: var(--red-soft); --sidebar-active: rgba(237, 29, 36, 0.16); --sidebar-active-color: var(--red); --sidebar-border: rgba(105, 114, 121, 0.2); --sidebar-group-color: var(--red); --sidebar-flyout-bg: var(--white); --sidebar-flyout-border: rgba(105, 114, 121, 0.28); --sidebar-rail-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); --sidebar-head-border: rgba(105, 114, 121, 0.24); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12); } /* ---------- Dark theme ---------- */ [data-theme="dark"] { --bg-primary: var(--black); --bg-secondary: #141414; --bg-card: #1a1a1a; --text-primary: var(--white); --text-muted: #b4bcc4; --text-subtle: #8e98a2; --border: rgba(180, 188, 196, 0.42); --table-head-bg: #262626; --table-head-text: #e8eaed; --table-row-alt: #1f1f1f; --table-row-hover: rgba(237, 29, 36, 0.12); --placeholder: #9aa3ad; --badge-halfday: #fbbf24; --badge-absent: #ff8a8a; --success: #b8c4ce; --info: #b8c4ce; --success-soft: rgba(184, 196, 206, 0.18); --info-soft: rgba(184, 196, 206, 0.18); --warning-soft: rgba(237, 29, 36, 0.2); --bg: var(--bg-primary); --bg-elevated: var(--bg-secondary); --surface: var(--bg-card); --marketing-surface: #111111; --marketing-dark: var(--black); --text: var(--text-primary); --sidebar-bg: rgba(20, 20, 20, 0.55); --sidebar-text: var(--white); --sidebar-muted: #b4bcc4; --sidebar-hover: var(--red-soft); --sidebar-active: rgba(237, 29, 36, 0.24); --sidebar-active-color: #ff6b72; --sidebar-border: rgba(180, 188, 196, 0.28); --sidebar-group-color: var(--red); --sidebar-flyout-bg: rgba(8, 8, 8, 0.96); --sidebar-flyout-border: rgba(105, 114, 121, 0.35); --sidebar-rail-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); --sidebar-head-border: rgba(105, 114, 121, 0.35); } [data-theme="dark"] { --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55); } body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); } [data-theme="light"] body, [data-theme="dark"] body { background: var(--bg-primary); color: var(--text-primary); } [data-theme="light"] .card, [data-theme="light"] .panel, [data-theme="light"] .tile, [data-theme="light"] .stat-card, [data-theme="light"] .auth-card, [data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] .tile, [data-theme="dark"] .stat-card, [data-theme="dark"] .auth-card { background: var(--bg-card); color: var(--text-primary); border-color: var(--border); } .modal, .modal-content { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); } [data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-theme="light"] select, [data-theme="light"] textarea, [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--placeholder); opacity: 1; } [data-theme="light"] table, [data-theme="dark"] table { color: var(--text-primary); } [data-theme="light"] .data-table thead th, [data-theme="dark"] .data-table thead th { background: var(--table-head-bg); color: var(--table-head-text); } [data-theme="light"] .data-table tbody td, [data-theme="dark"] .data-table tbody td { background: var(--bg-card); color: var(--text-primary); border-color: var(--border); } [data-theme="light"] .data-table tbody tr:nth-child(even) td, [data-theme="dark"] .data-table tbody tr:nth-child(even) td { background: var(--table-row-alt); } [data-theme="light"] a, [data-theme="dark"] a { color: var(--red); } [data-theme="light"] .muted, [data-theme="light"] .subtitle, [data-theme="light"] .stat-label, [data-theme="light"] .stat-sub, [data-theme="light"] label, [data-theme="light"] small, [data-theme="dark"] .muted, [data-theme="dark"] .subtitle, [data-theme="dark"] .stat-label, [data-theme="dark"] .stat-sub, [data-theme="dark"] label, [data-theme="dark"] small { color: var(--text-muted); } [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="dark"] h1, [data-theme="dark"] h2 { color: var(--text-primary); font-family: var(--font-heading-primary); font-weight: 700; } [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text-primary); font-family: var(--font-heading-secondary); font-weight: 400; } [data-theme="light"] button.outline, [data-theme="light"] .link-btn, [data-theme="dark"] button.outline, [data-theme="dark"] .link-btn { color: var(--text-primary); border-color: var(--border); } .panel-title { font-family: var(--font-heading-primary); font-weight: 700; letter-spacing: normal; } * { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: var(--color-grey2); } [data-theme="dark"] *::-webkit-scrollbar-track { background: #141414; } *::-webkit-scrollbar-thumb { background: var(--red); border-radius: 999px; }