/* ============================================================================ * Almasa design tokens — shared by all four web apps. * * HR Dashboard Next.js app/globals.css * AMC Tracker Vite src/main.jsx * Control Center Vite apps/dashboard/src/main.jsx * Media Gallery vanilla web/index.html * * Plain CSS custom properties. No framework, no build step, no dependency — * this file loads identically in Next.js, Vite and a static tag. * * The scales are taken from the HR Dashboard, which is the reference app. * Its typography is copied verbatim; its spacing and radius are tightened * (HR uses gaps at every value from 1–20px, which is not a scale). * * Naming follows AMC Tracker's existing `--amc-*` convention, generalised. * * DO NOT hardcode a value that exists here. If you need a value that does not * exist here, add it here rather than inline — that is the whole point. * * Edit this file in `Almasa VPS Apps/almasa-design/` and run ./sync.sh to push * it into the four apps. Never edit the copies. * ========================================================================= */ :root { /* --------------------------------------------------------------------- * Font families * * Inter is loaded latin-subset only, so it carries no CJK glyphs. The * CJK fallbacks below are MANDATORY, not cosmetic: without them the Lark * webview renders Chinese as tofu, because it does not fall back to a * system font on its own. Do not trim this chain. * * `--font-inter` / `--font-grotesk` are set by next/font in the HR * Dashboard ONLY. The other three apps do not define them. * * The fallback inside each var() is load-bearing — do NOT remove it. * `var(--font-inter), Inter, …` does NOT fall through to Inter when * --font-inter is undefined: an undefined var() with no fallback makes * the custom property guaranteed-invalid, which makes every declaration * referencing it invalid at computed-value time. The whole font stack is * discarded and the element renders in the default serif (Times). * Verified in headless Chrome: * var(--nope), Inter, sans-serif -> "Times" * var(--nope, Inter), sans-serif -> "Inter, sans-serif" * Hence `var(--font-inter, Inter)` rather than `var(--font-inter), Inter`. * ------------------------------------------------------------------ */ --almasa-font-ui: var(--font-inter, Inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", sans-serif; --almasa-font-mono: var(--font-grotesk, "Space Grotesk"), "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", monospace; /* --------------------------------------------------------------------- * Type scale — copied verbatim from the HR Dashboard. * * Numeric names because the ramp contains half-steps that sm/md/lg * naming cannot express. The half-pixel sizes are deliberate: they are * 48 uses in HR and removing them would change the reference app. * * Usage counts in HR shown for context. * ------------------------------------------------------------------ */ /* Core ramp — body and UI text. Fine-grained (1px, and 0.5px in the * 10–13 band) because these are dense data dashboards, not prose. */ --almasa-fs-1: 9px; --almasa-fs-2: 10px; --almasa-fs-3: 10.5px; --almasa-fs-4: 11px; --almasa-fs-5: 11.5px; --almasa-fs-6: 12px; --almasa-fs-7: 12.5px; --almasa-fs-8: 13px; /* body default — 46 uses in HR */ --almasa-fs-9: 14px; --almasa-fs-10: 15px; --almasa-fs-11: 16px; /* Display ramp — headings and page titles */ --almasa-fs-12: 18px; --almasa-fs-13: 20px; --almasa-fs-14: 24px; --almasa-fs-15: 28px; --almasa-fs-base: var(--almasa-fs-8); /* Sizes above 28px are one-off hero numbers (HR 54px login mark, * AMC 42px, Control Center 34/36px). Left inline on purpose — they are * not a scale and tokenising them would imply they are reusable. */ /* Font weights — HR's set. 850 is unusual but is 16 uses in HR; * Inter is a variable font so it renders correctly. */ --almasa-fw-regular: 400; --almasa-fw-medium: 500; --almasa-fw-semi: 600; --almasa-fw-bold: 700; --almasa-fw-extrabold: 800; --almasa-fw-heavy: 850; --almasa-fw-black: 900; /* Line heights */ --almasa-lh-none: 1; --almasa-lh-tight: 1.12; --almasa-lh-snug: 1.25; --almasa-lh-mid: 1.35; /* 22 uses across AMC/Control Center/Media Gallery */ --almasa-lh-normal: 1.45; --almasa-lh-relaxed: 1.5; /* Letter spacing — the wide values are for uppercase eyebrow/label text */ --almasa-ls-none: 0; --almasa-ls-tighter: -0.01em; /* optical tightening on display headings */ --almasa-ls-wide: 0.04em; --almasa-ls-wider: 0.06em; --almasa-ls-widest: 0.08em; --almasa-ls-caps: 0.12em; /* --------------------------------------------------------------------- * Spacing — 2px steps at the low end, widening as it grows. * * This is NOT copied verbatim from HR: HR uses gaps at 1,2,3,4,5,6,7,8, * 9,10,11,12,14,16,18px, which is not a scale. These steps keep HR's * high-usage values (8, 10, 12, 6, 16, 14 — 132 of ~155 gap uses) and * drop the stragglers. HR's 7px gaps snap to 6 or 8. * ------------------------------------------------------------------ */ --almasa-sp-1: 2px; --almasa-sp-2: 4px; --almasa-sp-3: 6px; --almasa-sp-4: 8px; --almasa-sp-5: 10px; --almasa-sp-6: 12px; --almasa-sp-7: 14px; --almasa-sp-8: 16px; --almasa-sp-9: 18px; --almasa-sp-10: 20px; --almasa-sp-11: 24px; --almasa-sp-12: 32px; --almasa-sp-13: 40px; /* --------------------------------------------------------------------- * Radius — anchored on 8px, which is already dominant * (HR 25 uses, Control Center 136 uses). * HR's 7 / 9 / 11px radii snap to the nearest step. * ------------------------------------------------------------------ */ --almasa-r-1: 4px; --almasa-r-2: 6px; --almasa-r-3: 8px; --almasa-r-4: 10px; --almasa-r-5: 12px; --almasa-r-6: 14px; --almasa-r-7: 16px; --almasa-r-8: 18px; --almasa-r-pill: 999px; --almasa-r-full: 50%; /* circles/avatars — 49 uses across all four apps */ /* Radii of 2–3px are deliberate hairlines, not scale steps. Leave inline. */ /* --------------------------------------------------------------------- * Elevation — derived from HR's existing shadows, which are sparse and * mostly one-offs. Three levels is enough; add here if a real fourth * need appears. * ------------------------------------------------------------------ */ --almasa-shadow-1: 0 2px 8px rgba(10, 20, 15, 0.08); --almasa-shadow-2: 0 24px 60px rgba(10, 20, 15, 0.25); --almasa-shadow-3: 0 30px 80px rgba(10, 20, 15, 0.4); /* --------------------------------------------------------------------- * Stacking order. One scale, so layering is designed rather than accidental. * Before this the four apps used 22 distinct z-index values between 0 and * 100002, and AMC had both `2` and `100002` — which dialog won was luck. * * The floors that must be cleared: Leaflet's map panes top out at 1000, and * Control Center's staging banner sits at 1600. * ------------------------------------------------------------------ */ --almasa-z-topbar: 20; --almasa-z-rail: 30; --almasa-z-banner: 1600; --almasa-z-modal: 2000; /* for a dialog opened FROM a dialog — date pickers, nested confirms */ --almasa-z-modal-top: 2100; /* toasts outrank modals on purpose: a confirmation must be visible over the * thing that triggered it. Media Gallery's toast sat at 60 and was hidden * behind every dialog. */ --almasa-z-toast: 3000; /* --------------------------------------------------------------------- * Motion * ------------------------------------------------------------------ */ --almasa-ease: cubic-bezier(0.4, 0, 0.2, 1); --almasa-dur-fast: 150ms; --almasa-dur-normal: 220ms; /* --------------------------------------------------------------------- * SEMANTIC COLOUR CONTRACT * * Unlike every other scale in this file, these are NAMES SHARED across the * four apps but VALUES SET PER APP. The four products have deliberately * different palettes — HR light green, Control Center dark green, AMC dark * navy, Media Gallery light indigo — and that is intended, not drift. * Sharing the names is what lets one component work in all four; sharing * the values would erase four product identities. * * Each app loads its own palette-.css AFTER this file to override * them, including a [data-theme="dark"] block where the app supports it. * The defaults below are the HR Dashboard's light palette, because HR is * the reference app. * * The `c-` infix is deliberate: the HR Dashboard already defines 22 legacy * aliases in its own namespace (--almasa-bg, --almasa-text, --almasa-border, * --almasa-muted, --almasa-danger, --almasa-panel...). Naming these * --almasa-bg etc. would collide with them and silently change HR. * ------------------------------------------------------------------ */ /* Surfaces */ --almasa-c-bg: #eef1ed; --almasa-c-bg-deep: #dfe4df; --almasa-c-surface: #ffffff; --almasa-c-surface-2: #f6faf8; --almasa-c-surface-3: #f4f9f6; --almasa-c-topbar: rgba(255, 255, 255, 0.94); /* Text — four levels, in descending prominence */ --almasa-c-text: #16211c; --almasa-c-text-soft: #45564c; --almasa-c-text-muted: #647468; --almasa-c-text-faint: #90a49a; /* Borders */ --almasa-c-border: rgba(16, 38, 29, 0.1); --almasa-c-border-strong: rgba(16, 38, 29, 0.14); /* Status */ --almasa-c-danger: #c93b57; --almasa-c-danger-bg: #fdeaea; --almasa-c-success: #159b74; --almasa-c-success-bg: #f1faf5; --almasa-c-warning: #b48120; /* --------------------------------------------------------------------- * Accent — the ONE value each app is allowed to differ on. * * This default is the Almasa green used by HR Dashboard and Control * Center. AMC Tracker and Media Gallery override it by loading their * accent-*.css AFTER this file. Nothing else here is per-app. * ------------------------------------------------------------------ */ --almasa-accent: #15895e; --almasa-accent-strong: #0f7a52; }