/* ========================================================================== quickTAMS — Design Tokens Layer 1 of 4. Nothing here paints anything; it only names values. Theme is switched by [data-theme] on , set before first paint by the inline script in includes/layout/header.php. ========================================================================== */ :root { /* ---- Neutral ramp (zinc) — the spine of the whole system ------------ */ --zinc-50: #FAFAFA; --zinc-100: #F4F4F5; --zinc-200: #E4E4E7; --zinc-300: #D4D4D8; --zinc-400: #A1A1AA; --zinc-500: #71717A; --zinc-600: #52525B; --zinc-700: #3F3F46; --zinc-800: #27272A; --zinc-900: #18181B; --zinc-950: #09090B; /* ---- Spacing — 4px base ------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ /* ---- Typography ---------------------------------------------------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", "Dubai", Tahoma, sans-serif; --font-mono: "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace; /* 14px base — dense enough for financial tables, still comfortable */ --fs-2xs: 0.6875rem; /* 11 — table micro-labels */ --fs-xs: 0.75rem; /* 12 — badges, captions */ --fs-sm: 0.8125rem; /* 13 — secondary text */ --fs-base: 0.875rem; /* 14 — body, tables, inputs */ --fs-md: 0.9375rem; /* 15 — emphasised body */ --fs-lg: 1.0625rem; /* 17 — card titles */ --fs-xl: 1.25rem; /* 20 — page titles (mobile) */ --fs-2xl: 1.5rem; /* 24 — page titles */ --fs-3xl: 1.875rem; /* 30 — stat values */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-snug: 1.4; --lh-normal: 1.55; --tracking-tight: -0.011em; --tracking-wide: 0.02em; --tracking-caps: 0.06em; /* ---- Radius -------------------------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-full: 999px; /* ---- Layout metrics ------------------------------------------------ */ --sidebar-w: 264px; --sidebar-rail-w: 72px; --topbar-h: 60px; --bottomnav-h: 60px; --content-max: 1560px; --tap-min: 44px; /* minimum touch target */ /* ---- Elevation (z-index) ------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-bottomnav: 1020; --z-topbar: 1030; --z-overlay: 1035; --z-sidebar: 1040; --z-dropdown: 1050; --z-modal: 1060; --z-toast: 1080; /* ---- Motion -------------------------------------------------------- */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ==================================================================== SEMANTIC TOKENS — light theme (default) ==================================================================== */ /* Surfaces */ --canvas: #FAFAFA; --surface: #FFFFFF; --surface-2: #F4F4F5; /* table heads, subtle fills, hover */ --surface-3: #E9E9EC; /* pressed, scrubbed */ --surface-inset: #FAFAFA; /* inputs, wells */ --overlay: rgba(9, 9, 11, 0.45); /* Borders */ --border: #E4E4E7; --border-subtle: #F1F1F3; --border-strong: #D4D4D8; /* Text */ --text: #18181B; --text-muted: #52525B; --text-subtle: #A1A1AA; --text-inverse: #FAFAFA; /* Accent — teal. Calm, reads as "financial", not Bootstrap blue. */ --accent: #0F766E; --accent-hover: #115E59; --accent-active: #134E4A; --accent-soft: #F0FDFA; --accent-soft-hover: #CCFBF1; --accent-border: #99F6E4; --accent-text: #0F766E; --on-accent: #FFFFFF; --accent-ring: rgba(15, 118, 110, 0.22); /* Status — paid */ --ok: #059669; --ok-soft: #ECFDF5; --ok-border: #A7F3D0; --ok-text: #047857; /* Status — partial / attention */ --warn: #D97706; --warn-soft: #FFFBEB; --warn-border: #FDE68A; --warn-text: #B45309; /* Status — unpaid / overdue / destructive */ --danger: #DC2626; --danger-soft: #FEF2F2; --danger-border: #FECACA; --danger-text: #B91C1C; /* Status — informational */ --info: #0284C7; --info-soft: #F0F9FF; --info-border: #BAE6FD; --info-text: #0369A1; /* Status — draft / neutral / cancelled */ --neutral: #71717A; --neutral-soft: #F4F4F5; --neutral-border: #E4E4E7; --neutral-text: #52525B; /* Shadows — this style leans on borders, so keep these restrained */ --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.04); --shadow-sm: 0 1px 3px rgba(9, 9, 11, 0.06), 0 1px 2px rgba(9, 9, 11, 0.04); --shadow-md: 0 4px 12px rgba(9, 9, 11, 0.07), 0 2px 4px rgba(9, 9, 11, 0.04); --shadow-lg: 0 12px 32px rgba(9, 9, 11, 0.10), 0 4px 8px rgba(9, 9, 11, 0.05); --shadow-xl: 0 24px 56px rgba(9, 9, 11, 0.14); color-scheme: light; } /* ======================================================================== SEMANTIC TOKENS — dark theme Only the semantic layer is redefined; the ramps and metrics carry over. ======================================================================== */ :root[data-theme="dark"] { --canvas: #09090B; --surface: #131316; --surface-2: #1C1C20; --surface-3: #27272A; --surface-inset: #0E0E11; --overlay: rgba(0, 0, 0, 0.65); --border: #27272A; --border-subtle: #1F1F23; --border-strong: #3F3F46; --text: #FAFAFA; --text-muted: #A1A1AA; --text-subtle: #71717A; --text-inverse: #18181B; --accent: #14B8A6; --accent-hover: #2DD4BF; --accent-active: #5EEAD4; --accent-soft: rgba(20, 184, 166, 0.12); --accent-soft-hover: rgba(20, 184, 166, 0.2); --accent-border: rgba(45, 212, 191, 0.32); --accent-text: #5EEAD4; --on-accent: #042F2E; --accent-ring: rgba(45, 212, 191, 0.3); --ok: #10B981; --ok-soft: rgba(16, 185, 129, 0.13); --ok-border: rgba(52, 211, 153, 0.3); --ok-text: #6EE7B7; --warn: #F59E0B; --warn-soft: rgba(245, 158, 11, 0.13); --warn-border: rgba(251, 191, 36, 0.3); --warn-text: #FCD34D; --danger: #F43F5E; --danger-soft: rgba(244, 63, 94, 0.13); --danger-border: rgba(251, 113, 133, 0.3); --danger-text: #FDA4AF; --info: #38BDF8; --info-soft: rgba(56, 189, 248, 0.13); --info-border: rgba(125, 211, 252, 0.3); --info-text: #7DD3FC; --neutral: #A1A1AA; --neutral-soft: rgba(161, 161, 170, 0.12); --neutral-border: rgba(161, 161, 170, 0.26); --neutral-text: #D4D4D8; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4); --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.7); color-scheme: dark; }