/* =========================================================================== * Dijiwa Design System — Tokens * --------------------------------------------------------------------------- * Single source of truth for brand chrome + type roles + type scale. * Owner-locked: NO gold. NO brown. Anywhere. The four named brand-gold * tones and the warm-dark nav are explicitly dropped (see the dropped-hexes * list in design_system.md §1). All accent pigments pivot to the cool half * of the spectrum. Cyan Green replaces the prior brand-gold chrome token. * * Imported once at the top of every dashboard HTML page. * login.html links this file too (since the 2026-10 soft-UI refresh) and adds * its own login.css on top. * =========================================================================== */ /* Fonts (Monotype-free, 2026-09-15 audit pass): * Fraunces — display serif (Google Fonts, SIL OFL 1.1) * Inter — UI sans, replace Helvetica Neue / Helvetica / Arial (Google Fonts, SIL OFL 1.1) * `display=swap` lets the page render with the system stack immediately and swap * to the loaded face once it arrives, so a slow Google CDN never blocks paint. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ---- 2.1 Brand tokens (chrome / borders / active states ONLY) --------- * Brand surface and chart surface are SIBLINGS, not parent/child — * Cyan Green never appears in a chart series, and chart hues never appear * in chrome. See dye-palette.css for the chart-side siblings. * --------------------------------------------------------------------- */ --brand: #006E64; /* Cyan Green — kain cepuk indigo family */ --brand-text: #006E64; /* Cyan Green as text — 5.3:1 on the neutral grey page bg, clears WCAG AA */ --dark: #0A0A0A; /* nav / ink — true near-black */ --warm: #F4F4F5; /* page bg — neutral grey, no warm cast */ --tint: #80C2B6; /* cool light tint, hover washes */ --surface-light: #FFFFFF; /* chart surface — white (charts sit on white cards) */ --surface-dark: #0A0A0A; /* chart surface — dark mode (replaces #1a1a19 — now true near-black) */ /* ---- 2.2 Neutral fills (soft-UI refresh, 2026-10) ---------------------- * The canvas is --warm; content sits on white cards; anything NESTED in a * white card (stat tile, input, segmented track, list group) is a grey FILL, * never a bordered box. Two steps only: --fill for a resting block, --fill-2 * for a control inside it (input, track) and for hover/pressed. * --------------------------------------------------------------------- */ --fill: #F4F4F5; /* nested block on a white card — same value as the canvas */ --fill-2: #E9E9EB; /* control inside a fill; hover/pressed of a fill */ --muted: #6B7280; /* secondary text — 4.8:1 on white, 4.4:1 on --fill (use on white for body copy) */ --faint: #A1A1AA; /* placeholder / disabled text only — never information */ --scrim: rgba(10, 10, 10, .32); /* the dim layer behind an overlay */ /* ---- 2.6 Group markers (reserved — never in categorical rotation) ----- */ --dijiwa-border: #006E64; /* Dijiwa hotel card border-left */ --lokalua-border: #ec4899; /* Lokalua hotel card border-left (KEPT — pink is not gold/brown) */ /* ---- 2.7 Radius & elevation scale -------------------------------------- * Four radius steps, each PAIRED with one elevation step. The pairing is the * whole point: how round a surface is tracks how far it sits off the page, so * a stat tile, the panel wrapping a chart, and a modal can no longer be told * apart only by what is inside them. * * WHY THIS EXISTS (added 2026-08-19): there was no radius token at all before. * Measured across frontend/: 904 `rounded-*` usages and 265 shadows, of which * 240 of 261 radius+shadow pairings (92%) were the SAME `rounded-xl` + * `shadow`/`shadow-sm` recipe. A KPI tile, a content card, a whole chart * section and a modal all rendered identical corners and identical lift. That * flatness of HIERARCHY — not colour — is what made the dashboard read as * templated. * * The `shadow` vs `shadow-sm` split was an ERA fault line, never a decision: * the older hotel*.html family standardised on bare `shadow`, the newer * corporate-* / productivity / direct-channel / web-marketing family on `shadow-sm`. * Both now resolve to one token. * * Consume these through the semantic surface classes in style.css * (.surface-tile / .surface-card / .surface-popover / .surface-overlay) * rather than hand-assembling `bg-white rounded-xl shadow` again. * --------------------------------------------------------------------- */ --radius-sm: 6px; /* inline marks — legend swatches, progress fills, rectangular badges */ --radius-md: 14px; /* controls — inputs, selects, menu items, small objects */ --radius-tile: 20px; /* stat tiles and nested panels (a block inside a card) */ --radius-lg: 24px; /* content surfaces — cards, panels, chart/table sections */ --radius-xl: 28px; /* overlays — modals, dialogs, slide-overs */ --radius-pill: 999px; /* capsules — buttons, chips, segmented controls, progress bars */ /* Elevation (soft-UI refresh, 2026-10): surfaces that REST on the page are FLAT. * A white card on the grey canvas, or a grey fill on a white card, is already * separated by its tone; a shadow or a hairline on top of that is noise. Only * what FLOATS above the page (menu, tooltip, modal) casts a shadow. */ --elev-flat: none; --elev-raised: none; --elev-thumb: 0 1px 3px rgba(10, 10, 10, .10); /* the active segment of a segmented control */ --elev-popover: 0 8px 24px rgba(10, 10, 10, .16); --elev-overlay: 0 24px 64px rgba(10, 10, 10, .22); /* Hairlines — near-black ink at low alpha, never a warm/brown tint. */ --hairline: rgba(10, 10, 10, .10); --hairline-strong: rgba(10, 10, 10, .18); /* ---- 3.1 Type roles ---------------------------------------------------- * Monotype-free body sans (Inter, Google Fonts, SIL OFL 1.1) replaces the * prior 'Helvetica Neue', Helvetica, Arial chain. Display serif stays * Fraunces; the Times New Roman fallback is dropped (Monotype/Linotype) and * replaced by Source Serif 4 (OFL) + Georgia (Microsoft system, not Monotype). */ --font-display: 'Fraunces', 'Source Serif 4', Georgia, serif; /* Headings and hero numbers are Inter since the 2026-10 soft-UI refresh: * heavy weight + tight tracking, not a serif, carries the hierarchy. Fraunces * (--font-display) stays for printed/exported reports and brand moments only. */ --font-heading: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-utility: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Display rule: Fraunces ships with optical sizing ON so the same face * reads correctly at 14px eyebrow vs 48px hero. */ font-optical-sizing: auto; /* ---- Forced light ------------------------------------------------------ * Tells the UA to render native chrome (form controls, scrollbars, the * default canvas) in LIGHT even when the OS/browser is in dark mode. * Without this a dark-mode browser paints /checkbox/ * scrollbar in dark UA styling on top of our neutral grey page. Pairs with the * removed prefers-color-scheme block below — both are required. * --------------------------------------------------------------------- */ color-scheme: light; } /* ---- Colour scheme: FORCED LIGHT (no prefers-color-scheme: dark block) ---- * DELIBERATE. Do NOT re-add an auto-invert here. * The brand IS neutral grey (--warm) + Cyan Green (--brand) + near-black ink (--dark). * These are CHROME, not data colours: swapping --warm ↔ --dark turned the page * background black, flipped body ink to a light tone, left white cards popping off a * black surface, and broke the sidebar (verified from a user screenshot, * 2026-08-19). A real dark mode needs a parallel token set, re-tuned charts and * every contrast ratio re-validated — that is its own project, not a swap. * --------------------------------------------------------------------- */ /* =========================================================================== * 3.2 Type scale — project-specific, locked. * Each role is exposed as CSS custom properties so chart/JS code can read the * values without recomputing. Class equivalents live in style.css. * =========================================================================== */ :root { /* Numerals: tabular for column-aligned numbers; proportional only on num-hero. */ --num-tabular: tabular-nums; /* eyebrow — 11/600/+0.055em — section labels above a chart (TOTAL, WEEK) */ --eyebrow-size: 11px; --eyebrow-weight: 600; --eyebrow-track: 0.055em; /* caption — 12/400 — source citations under a chart, tooltip footers */ --caption-size: 12px; --caption-weight: 400; /* small — 14/400 — table headers, dense rows */ --small-size: 14px; --small-weight: 400; /* body — 16/400 — body paragraphs, table cells */ --body-size: 16px; --body-weight: 400; /* h4 — 17/600/-0.01em — card titles, panel heads */ --h4-size: 17px; --h4-weight: 600; --h4-track: -0.01em; /* h3 — 20/600/-0.018em — section heads within a page */ --h3-size: 20px; --h3-weight: 600; --h3-track: -0.018em; /* h2 — 24/700/-0.022em — page subtitles */ --h2-size: 24px; --h2-weight: 700; --h2-track: -0.022em; /* h1 — 32/700/-0.03em — page titles */ --h1-size: 32px; --h1-weight: 700; --h1-track: -0.03em; /* num-hero — 48/600/-0.03em — proportional numerals, the single hero number */ --num-hero-size: 48px; --num-hero-weight: 600; --num-hero-track: -0.03em; }