/* ============================================================ CityCleaning Design Tokens ------------------------------------------------------------ - Single source of truth for color, type, spacing, motion. - All tokens are CSS variables → can be themed at runtime. - LTR/RTL handled via CSS logical properties downstream. - Bootstrap 5 --bs-* variables are overridden so existing utility classes pick up the system automatically. ============================================================ */ :root { /* ---------- Color · Canvas ---------- */ --color-canvas: #FAFAF7; /* warm off-white page background */ --color-surface: #FFFFFF; /* cards, panels */ --color-surface-sunken: #F4F4F0; /* secondary surfaces, hovered rows */ --color-surface-inverse: #0A0A0A; /* ---------- Color · Ink ---------- */ --color-ink: #0A0A0A; /* primary text */ --color-ink-soft: #525252; /* secondary text */ --color-ink-muted: #737373; /* tertiary / placeholder */ --color-ink-inverse: #FAFAF7; /* ---------- Color · Border ---------- */ --color-border: #E5E5E1; /* hairline */ --color-border-strong: #D4D4D0; /* emphasised borders */ --color-border-focus: #0F6B47; /* ---------- Color · Brand (emerald — civic, not the usual SaaS blue) ---------- */ --color-brand: #0F6B47; --color-brand-hover: #0A4E33; --color-brand-active: #073B26; --color-brand-subtle: #ECF5F1; /* bg for chips, hovered nav, soft cards */ --color-brand-ink: #FFFFFF; /* foreground on brand surfaces */ /* ---------- Color · Status (incident lifecycle) ---------- */ --color-status-reported-fg: #B45309; --color-status-reported-bg: #FEF3C7; --color-status-assigned-fg: #4338CA; --color-status-assigned-bg: #E0E7FF; --color-status-in-progress-fg: #1E40AF; --color-status-in-progress-bg: #DBEAFE; --color-status-pending-fg: #C2410C; --color-status-pending-bg: #FFEDD5; --color-status-resolved-fg: #047857; --color-status-resolved-bg: #D1FAE5; --color-status-rejected-fg: #BE123C; --color-status-rejected-bg: #FFE4E6; /* ---------- Color · Feedback ---------- */ --color-danger: #BE123C; --color-danger-bg: #FFE4E6; --color-warning: #B45309; --color-warning-bg: #FEF3C7; --color-success: #047857; --color-success-bg: #D1FAE5; --color-info: #1E40AF; --color-info-bg: #DBEAFE; /* ---------- Typography ---------- */ /* IBM Plex Sans Arabic covers Arabic glyphs; IBM Plex Sans covers Latin/numerics. Browsers fall back per glyph, so the same declaration works LTR + RTL. */ --font-sans: 'IBM Plex Sans Arabic', 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-size-2xs: 0.6875rem; /* 11px — eyebrow labels */ --font-size-xs: 0.75rem; /* 12px — meta text */ --font-size-sm: 0.8125rem; /* 13px — table cells */ --font-size-base: 0.875rem; /* 14px — default body */ --font-size-md: 1rem; /* 16px — emphasised body */ --font-size-lg: 1.125rem; /* 18px — section title */ --font-size-xl: 1.375rem; /* 22px — page subtitle */ --font-size-2xl: 1.75rem; /* 28px — page title */ --font-size-3xl: 2.25rem; /* 36px — hero */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-snug: 1.35; --line-height-normal: 1.5; --line-height-loose: 1.65; --letter-spacing-tight: -0.015em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.06em; /* ---------- Spacing (4-base) ---------- */ --space-0: 0; --space-1: 0.125rem; /* 2px */ --space-2: 0.25rem; /* 4px */ --space-3: 0.375rem; /* 6px */ --space-4: 0.5rem; /* 8px */ --space-5: 0.75rem; /* 12px */ --space-6: 1rem; /* 16px */ --space-7: 1.25rem; /* 20px */ --space-8: 1.5rem; /* 24px */ --space-10: 2rem; /* 32px */ --space-12: 2.5rem; /* 40px */ --space-14: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ---------- Radii ---------- */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 999px; /* ---------- Elevation ---------- */ --shadow-xs: 0 0 0 1px rgba(10, 10, 10, 0.04); --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04), 0 0 0 1px rgba(10, 10, 10, 0.04); --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.06), 0 0 0 1px rgba(10, 10, 10, 0.04); --shadow-lg: 0 12px 32px rgba(10, 10, 10, 0.08), 0 0 0 1px rgba(10, 10, 10, 0.04); --shadow-focus: 0 0 0 3px rgba(15, 107, 71, 0.18); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 140ms; --duration-med: 220ms; --duration-slow: 320ms; /* ---------- Layout ---------- */ --sidebar-width: 260px; --sidebar-width-collapsed: 64px; --topbar-height: 56px; --max-content-width: 1280px; --page-padding-inline: var(--space-10); --page-padding-block: var(--space-8); /* ---------- Bootstrap 5 token overrides ---------- */ /* Keep Bootstrap utilities working but on our palette. */ --bs-body-bg: var(--color-canvas); --bs-body-color: var(--color-ink); --bs-body-font-family: var(--font-sans); --bs-body-font-size: var(--font-size-base); --bs-body-line-height: var(--line-height-normal); --bs-border-color: var(--color-border); --bs-border-radius: var(--radius-md); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-primary: var(--color-brand); --bs-primary-rgb: 15, 107, 71; --bs-link-color: var(--color-brand); --bs-link-hover-color: var(--color-brand-hover); --bs-danger: var(--color-danger); --bs-success: var(--color-success); --bs-warning: var(--color-warning); --bs-info: var(--color-info); } /* RTL-specific overrides (subtle — most of the layout uses logical properties). */ [dir="rtl"] { --letter-spacing-tight: 0; /* Arabic letterforms are sensitive to negative tracking */ }