/* ========================================================= UzOffice — DESIGN TOKENS (single source of truth) --------------------------------------------------------- Primitive layer only. Nothing here styles an element; every value is a raw scale step that the semantic layers consume: assets/css/style.css -> --color-*, --fs-*, --space-* (front, dashboard, auth, editor) admin-assets/css/admin.css -> --a-* (admin panel) Loaded FIRST in every layout. Because custom properties resolve at computed-value time, the two semantic sheets can reference --ds-* regardless of load order — but keep this first so the cascade stays obvious. Neutral ramp is SLATE for the whole product. Front used to run a warm Tailwind "gray" ramp while admin ran "slate"; the two temperatures read as two different products. One ramp fixes that. Contrast pairs referenced below are measured against --ds-white / --ds-slate-50 and are WCAG 2.1 AA verified. ========================================================= */ :root { /* --------------------------------------------------------- NEUTRALS — slate. Contrast vs #fff noted for text tiers. --------------------------------------------------------- */ --ds-white: #ffffff; --ds-slate-50: #f8fafc; --ds-slate-100: #f1f5f9; /* Half-step between 100 and 200. Exists for one reason: a table header band needs to be darker than the page background it sits on, and the admin page background IS slate-100 — so a slate-100 header reads as a hole in the card rather than a header. This step separates the two without going to 200, which is heavy enough to look like a selected row. */ --ds-slate-150: #e8edf4; --ds-slate-200: #e2e8f0; --ds-slate-300: #cbd5e1; --ds-slate-400: #94a3b8; --ds-slate-500: #64748b; /* 4.76:1 on white — AA small text */ --ds-slate-600: #475569; /* 7.58:1 on white — AA+ */ /* Off-ramp step for the lowest text tier. Plain slate-500 clears AA on a white card (4.76) but only reaches 4.34 on the admin's slate-100 page background, so subtle text sitting outside a card failed. This clears both: 5.12 on white, 4.67 on slate-100. */ --ds-slate-subtle-text: #5f6f86; --ds-slate-700: #334155; --ds-slate-800: #1e293b; --ds-slate-900: #0f172a; /* 17.85:1 on white */ --ds-slate-950: #020617; /* Boundary colour for form controls. WCAG 1.4.11 wants 3:1 for a control whose border is its only visual identifier — slate-300 (1.48:1) and slate-400 (2.56:1) both miss it. 3.01:1. */ --ds-border-input: #8896a8; --ds-border-input-dark: #6d7a8d; /* --------------------------------------------------------- NAVY — the app-CHROME family: admin sidebar, admin login, the user-detail hero plate, tooltips. Deliberately NOT the slate content ramp. Chrome and content are different materials, and slate-900 (#0f172a) is a neutral dark that goes muddy the moment brand blue is laid over it. These steps carry a blue cast of their own, so a blue accent sitting on them reads as the same light source rather than a sticker. Stated as rgb() on purpose — every translucent layer built on top of this family (glows, hairlines, active tints) is composited against these exact channel values, and the contrast numbers below were measured against them. --------------------------------------------------------- */ --ds-navy-950: rgb(6, 11, 24); --ds-navy-900: rgb(11, 19, 38); /* sidebar base — text tiers measured on this */ --ds-navy-850: rgb(15, 25, 48); --ds-navy-800: rgb(21, 33, 61); /* raised chrome: flyouts, dark avatar */ --ds-navy-700: rgb(30, 45, 80); /* --------------------------------------------------------- BRAND — blue. 600 is the CTA; 500 is the dark-mode accent. --------------------------------------------------------- */ --ds-blue-50: #eff6ff; --ds-blue-200: #bfdbfe; --ds-blue-300: #93c5fd; --ds-blue-400: #60a5fa; --ds-blue-500: #3b82f6; --ds-blue-600: #2563eb; /* white label = 5.17:1 */ --ds-blue-700: #1d4ed8; --ds-blue-800: #1e40af; --ds-indigo-700: #4338ca; /* --------------------------------------------------------- STATUS — light-mode values are the *text* weights, so each already clears 4.5:1 on its own -subtle background. --------------------------------------------------------- */ --ds-success: #15803d; --ds-success-subtle: #f0fdf4; --ds-success-border: #bbf7d0; --ds-danger: #b91c1c; --ds-danger-hover: #991b1b; --ds-danger-active: #7f1d1d; --ds-danger-subtle: #fef2f2; --ds-danger-border: #fecaca; --ds-warning: #b45309; --ds-warning-subtle: #fffbeb; --ds-warning-border: #fde68a; --ds-info: #0e7490; --ds-info-subtle: #ecfeff; --ds-info-border: #a5f3fc; /* Dark-mode status: lightened so they clear 4.5:1 on dark surfaces */ --ds-success-dark: #4ade80; --ds-danger-dark: #f87171; --ds-warning-dark: #fbbf24; --ds-info-dark: #7dd3fc; /* Solid danger FILL (notification badges). Distinct role from --ds-danger, which is a text weight: white on #dc2626 is 4.83:1. */ --ds-danger-solid: #dc2626; /* --------------------------------------------------------- CATEGORICAL — avatar / chip tints. Each pair is a 700-weight foreground on its own 50-weight tint (all >= 7:1), so they stay legible and remain distinguishable without relying on hue alone. --------------------------------------------------------- */ --ds-cat-indigo-fg: #4338ca; --ds-cat-indigo-bg: #eef2ff; --ds-cat-emerald-fg: #047857; --ds-cat-emerald-bg: #ecfdf5; --ds-cat-amber-fg: #b45309; --ds-cat-amber-bg: #fffbeb; --ds-cat-rose-fg: #be123c; --ds-cat-rose-bg: #fff1f2; --ds-cat-sky-fg: #0369a1; --ds-cat-sky-bg: #f0f9ff; --ds-cat-sky-border: #bae6fd; --ds-cat-violet-fg: #6d28d9; --ds-cat-violet-bg: #f5f3ff; /* Brand marks — fixed by the vendor, never themed */ --ds-brand-google: #ea4335; --ds-brand-telegram: #229ed9; /* Document-type accents (text doc vs spreadsheet), mirroring the file-type colour convention users already expect from office suites */ --ds-doc-accent: #2563eb; --ds-sheet-accent: #047857; /* --------------------------------------------------------- TYPE SCALE — one ramp for the whole product. 12 is the floor: never set body text below it. --------------------------------------------------------- */ --ds-fs-2xs: 11px; /* decorative glyphs/chevrons ONLY — never text */ --ds-fs-xs: 12px; --ds-fs-sm: 14px; --ds-fs-base: 16px; --ds-fs-lg: 18px; --ds-fs-xl: 20px; --ds-fs-2xl: 24px; --ds-fs-3xl: 32px; --ds-fs-4xl: 40px; --ds-fs-5xl: 48px; /* hero display, >=1440px only */ --ds-lh-tight: 1.3; --ds-lh-ui: 1.2; --ds-lh-base: 1.55; --ds-fw-normal: 400; --ds-fw-medium: 500; --ds-fw-semibold: 600; --ds-fw-bold: 700; /* --------------------------------------------------------- SPACING — strict 4px rhythm. --------------------------------------------------------- */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 24px; --ds-space-6: 32px; --ds-space-7: 48px; --ds-space-8: 64px; /* --------------------------------------------------------- RADIUS / ELEVATION --------------------------------------------------------- */ --ds-radius-sm: 8px; --ds-radius-md: 12px; --ds-radius-lg: 16px; --ds-radius-pill: 999px; --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --ds-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08); --ds-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); --ds-shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.18); /* Coloured elevation. A neutral grey shadow under a saturated blue button reads as dirt; tinting the shadow with the button's own hue is what makes a primary CTA look lit rather than pasted on. Same idea for the active sidebar item, which sits on near-black and needs its own glow. */ --ds-shadow-primary: 0 1px 2px rgba(15, 23, 42, 0.10), 0 3px 10px rgba(37, 99, 235, 0.28); --ds-shadow-primary-lg: 0 2px 4px rgba(15, 23, 42, 0.12), 0 8px 20px rgba(37, 99, 235, 0.34); --ds-shadow-danger: 0 1px 2px rgba(15, 23, 42, 0.10), 0 3px 10px rgba(185, 28, 28, 0.26); /* Hairline highlight along the top edge of a raised control — the classic "lit from above" cue that separates a premium button from a flat rectangle. */ --ds-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.16); --ds-shadow-sm-dark: 0 1px 2px rgba(0, 0, 0, 0.4); --ds-shadow-md-dark: 0 4px 12px rgba(0, 0, 0, 0.45); --ds-shadow-lg-dark: 0 12px 32px rgba(0, 0, 0, 0.55); --ds-shadow-xl-dark: 0 20px 48px rgba(0, 0, 0, 0.6); /* --------------------------------------------------------- MOTION — one rhythm everywhere. 180ms sits inside the 150–300ms micro-interaction band; exits run shorter. --------------------------------------------------------- */ --ds-dur-fast: 0.12s; --ds-dur-base: 0.18s; --ds-dur-slow: 0.5s; --ds-ease: ease; --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* --------------------------------------------------------- APP SHELL — front dashboard and admin share one geometry. --------------------------------------------------------- */ --ds-topbar-h: 64px; --ds-sidebar-w: 264px; --ds-sidebar-w-collapsed: 80px; /* Minimum interactive height. 44px is the Apple HIG / WCAG 2.5.5 target; padding alone left the default button at 38px. --sm is for dense toolbars and table row actions and still clears WCAG 2.5.8 (24px). */ --ds-control-h: 44px; --ds-control-h-sm: 36px; /* --------------------------------------------------------- RGB TRIPLETS — Bootstrap composes its rgba() values from "R, G, B" strings (e.g. .text-secondary is rgba(var(--bs-secondary-rgb), var(--bs-text-opacity))), so the bridge in style.css needs these alongside the hex tokens. Keep each one in sync with the hex above it. --------------------------------------------------------- */ --ds-slate-200-rgb: 226, 232, 240; --ds-slate-500-rgb: 100, 116, 139; --ds-slate-600-rgb: 71, 85, 105; --ds-slate-900-rgb: 15, 23, 42; --ds-blue-500-rgb: 59, 130, 246; --ds-blue-600-rgb: 37, 99, 235; --ds-success-rgb: 21, 128, 61; --ds-danger-rgb: 185, 28, 28; --ds-warning-rgb: 180, 83, 9; --ds-info-rgb: 14, 116, 144; /* dark-theme counterparts */ --ds-text-dark-rgb: 230, 233, 240; --ds-muted-dark-rgb: 154, 164, 182; --ds-border-dark-rgb: 41, 49, 63; --ds-success-dark-rgb: 74, 222, 128; --ds-danger-dark-rgb: 248, 113, 113; --ds-warning-dark-rgb: 251, 191, 36; --ds-info-dark-rgb: 125, 211, 252; /* Focus ring — identical treatment in both shells. These are translucent on purpose: the rings used to be the near-white -subtle tints (#eff6ff / #fef2f2), which are invisible against a white card. */ --ds-focus-ring-width: 3px; --ds-focus-ring: rgba(37, 99, 235, 0.35); --ds-focus-ring-dark: rgba(96, 165, 250, 0.45); --ds-focus-ring-danger: rgba(185, 28, 28, 0.32); }