/* =========================================================================== ARDITO — design tokens --------------------------------------------------------------------------- ONE source of truth for the three staff apps: pt_attestation :3003 pt.af247.app (light) ba_workstation :3002 ba.af247.app (light) dashboard_v2 :3000 team.af247.app (dark, via [data-theme="dark"]) Written 2026-08-30 after a cross-surface audit measured 802 distinct hex colours across the three apps with only 54 shared (6.7%), 191 box-shadow declarations against 9 declared tokens, 74 radii and 5 typefaces. The three apps did not look like one product because they were not built as one. THE RULES THIS FILE ENCODES 1. Fill and ink are SEPARATE tokens. `--ard-ok` is a background. `--ard-ok-ink` is text. Never use a fill token as `color:` — that single confusion caused the worst contrast failure in the product (amber text on amber tint, 2.25:1). 2. Every text/surface pair here is verified >= 4.5:1 and every interactive boundary >= 3:1, in BOTH themes, by agents/smoke/ardito_contrast_smoke.py. Values were solved with scripts/contrast.py, not picked by eye. 3. Light and dark are two value sets of the SAME role names. A component is written once and is correct in both. 4. Identity colour (country, club, category) NEVER uses the status palette. A Philippine club is not an error. DO NOT add a raw hex to a template. If a role is missing, add it here. =========================================================================== */ :root { /* ── Surfaces ─────────────────────────────────────────────────────────── bg = the page surface = a card sitting on the page -2 = a subtle fill inside a card (table head, inset panel) -3 = an input well / deeper inset -hover = row and tile hover */ --ard-bg: #f5f6fa; --ard-surface: #ffffff; --ard-surface-2: #f7f8fc; --ard-surface-3: #eef0f7; --ard-surface-hover: #f2f4fb; --ard-scrim: rgba(10, 14, 28, 0.55); /* ── Borders ──────────────────────────────────────────────────────────── --ard-border is DECORATIVE (hairlines, table rules, card edges). --ard-border-strong is for the boundary of anything INTERACTIVE and is held to WCAG 1.4.11's 3:1 — inputs, selects, secondary buttons. */ --ard-hairline: #eceef4; --ard-border: #dfe3ec; --ard-border-strong: #7c849c; /* >=3:1 on every light surface (WCAG 1.4.11) */ /* ── Ink ──────────────────────────────────────────────────────────────── */ --ard-ink: #12151f; /* 18.2:1 on surface */ --ard-ink-2: #3f4557; /* 9.5:1 */ --ard-ink-3: #646b80; /* 5.3:1 — the muted floor, still real text */ --ard-ink-4: #a8aebe; /* DECORATIVE ONLY — dots, separators, never text */ --ard-ink-on-accent: #ffffff; /* ── Accent ───────────────────────────────────────────────────────────── #2E6BFF is the one value already present in all three apps, so it is the product accent. It is a FILL. For accent-coloured TEXT on a light surface use --ard-accent-ink, which is darkened to clear 4.5:1. */ --ard-accent: #2E6BFF; --ard-accent-hover: #215CE8; --ard-accent-active: #1B52D6; --ard-accent-ink: #215CE8; --ard-accent-2: #38BDF8; --ard-accent-tint: rgba(46, 107, 255, 0.08); --ard-accent-tint-2: rgba(46, 107, 255, 0.14); --ard-accent-border: rgba(46, 107, 255, 0.35); --ard-accent-glow: rgba(46, 107, 255, 0.22); /* ── Status — fill / ink / tint / border, four tokens each ────────────── */ --ard-ok: #127a43; --ard-ok-ink: #127a43; --ard-ok-tint: rgba(18, 122, 67, 0.10); --ard-ok-border: rgba(18, 122, 67, 0.30); --ard-warn: #8a5300; --ard-warn-ink: #8a5300; --ard-warn-tint: rgba(138, 83, 0, 0.12); --ard-warn-border: rgba(138, 83, 0, 0.30); --ard-danger: #b3261e; --ard-danger-ink: #b3261e; --ard-danger-tint: rgba(179, 38, 30, 0.10); --ard-danger-border: rgba(179, 38, 30, 0.30); --ard-info: #2E6BFF; --ard-info-ink: #1b4fd8; --ard-info-tint: rgba(46, 107, 255, 0.10); --ard-info-border: rgba(46, 107, 255, 0.30); --ard-neutral: #646b80; --ard-neutral-ink: #3f4557; --ard-neutral-tint: rgba(100, 107, 128, 0.10); --ard-neutral-border: rgba(100, 107, 128, 0.28); /* One step LOUDER than danger. Reserved for a deadline already missed — an unsigned session past its window, an overdue lead. Solid, not tinted. */ --ard-critical: #8f1d17; --ard-critical-ink: #ffffff; /* "We have no data" is NOT "something failed". Distinct on purpose: a scorecard with no reading must not read as a breach. */ --ard-nodata-ink: #646b80; --ard-nodata-border: #c7ccda; /* Figures not yet reconciled to a bookkeeper's filing. */ --ard-prelim: #a06a00; --ard-prelim-tint: rgba(160, 106, 0, 0.12); /* ── Identity — never from the status palette ─────────────────────────── */ --ard-country-ph: #1f7ae0; --ard-country-sg: #7b4bd6; --ard-country-my: #0e8a7d; --ard-country-id: #c2571b; /* ── Charts ───────────────────────────────────────────────────────────── */ --ard-chart-1: #2E6BFF; --ard-chart-2: #38BDF8; --ard-chart-3: #818CF8; --ard-chart-4: #22D3EE; --ard-chart-5: #60A5FA; --ard-chart-6: #34D39F; --ard-chart-7: #FFB648; --ard-chart-8: #FF6B6B; --ard-chart-9: #B97CFF; --ard-chart-pos: #127a43; --ard-chart-neg: #b3261e; --ard-chart-axis: #9aa2b6; --ard-chart-gridline: #eceef4; /* ── Type ─────────────────────────────────────────────────────────────── Body is the system stack: zero network cost on the cheap Android phones this runs on at a front desk, and it is the fastest text on every device the team owns. Display is the one expressive face. */ --ard-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ard-font-display: "Boldonse", var(--ard-font-body); --ard-font-num: "Bricolage Grotesque", var(--ard-font-body); --ard-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* 11px is a HARD floor. The dashboard had 43 inline sizes below it, down to 8.5px, on data staff are expected to act on. */ --ard-fs-xs: 11px; --ard-fs-sm: 12px; --ard-fs-md: 13.5px; --ard-fs-lg: 15px; --ard-fs-xl: 20px; --ard-fs-2xl: clamp(22px, 2.2vw, 30px); --ard-fs-display: clamp(24px, 3vw, 34px); --ard-lh-tight: 1.2; --ard-lh: 1.5; --ard-lh-relaxed: 1.65; --ard-tracking-label: 0.06em; /* ── Space — the scale REALITY uses. 6, 10, 12 and 14 are the most common gaps in all three apps; a 4/8/16 scale would have forced 155 rewrites. */ --ard-sp-1: 2px; --ard-sp-2: 4px; --ard-sp-3: 6px; --ard-sp-4: 8px; --ard-sp-5: 10px; --ard-sp-6: 12px; --ard-sp-7: 14px; --ard-sp-8: 16px; --ard-sp-10: 24px; --ard-sp-12: 32px; --ard-sp-16: 48px; --ard-sp-20: 64px; --ard-page-pad: clamp(16px, 3vw, 32px); --ard-page-max: 1240px; /* ── Radius — maps 74 observed values onto 5 ──────────────────────────── */ --ard-r-sm: 8px; --ard-r-md: 12px; --ard-r-lg: 16px; --ard-r-xl: 20px; --ard-r-pill: 999px; /* ── Elevation — tinted with the accent, never flat black ─────────────── */ --ard-sh-1: 0 1px 2px rgba(18, 21, 31, 0.04), 0 2px 8px rgba(46, 107, 255, 0.04); --ard-sh-2: 0 2px 4px rgba(18, 21, 31, 0.05), 0 8px 24px rgba(46, 107, 255, 0.09); --ard-sh-3: 0 8px 16px rgba(18, 21, 31, 0.09), 0 24px 56px rgba(46, 107, 255, 0.16); /* ── Motion — the one block that was already identical in all three apps, which is the proof this whole approach works. Now it has company. */ --ard-ease-out: cubic-bezier(0.25, 1, 0.5, 1); --ard-ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --ard-dur-feedback: 120ms; --ard-dur-nav: 160ms; --ard-dur-state: 240ms; --ard-dur-layout: 400ms; --ard-stagger: 60ms; --ard-press-scale: 0.97; /* ── Z — collapses four competing scales and the raw 9000/1301 ────────── */ --ard-z-base: 1; --ard-z-raised: 10; --ard-z-dropdown: 20; --ard-z-sticky: 50; --ard-z-bar: 100; --ard-z-progress: 110; --ard-z-overlay: 200; --ard-z-top: 300; /* ── Interaction ─────────────────────────────────────────────────────── The ring is OPAQUE two-tone: a spacer in the page colour, then a solid accent. A translucent ring composites differently on every surface and went as low as 1.5:1 on the dashboard's filter bar. */ --ard-focus-ring: 0 0 0 2px var(--ard-bg), 0 0 0 4px var(--ard-accent); --ard-focus-offset: 2px; --ard-tap-min: 44px; --ard-tap-min-inline: 32px; /* checkbox / radio / range ONLY */ --ard-disabled-opacity: 0.55; color-scheme: light; } /* =========================================================================== DARK — same role names, different values. Applied by the team dashboard. =========================================================================== */ [data-theme="dark"] { --ard-bg: #0a0e1c; --ard-surface: #101830; --ard-surface-2: #182342; --ard-surface-3: #223055; --ard-surface-hover: #1b2748; --ard-scrim: rgba(3, 5, 12, 0.68); --ard-hairline: #1b2540; --ard-border: #2a3a5c; --ard-border-strong: #617ab4; /* the only value clearing 3:1 on all four */ --ard-ink: #f0f2fa; --ard-ink-2: #b6bcd0; --ard-ink-3: #969cb3; /* clears 4.5:1 even on --ard-surface-3 */ --ard-ink-4: #5c6480; --ard-ink-on-accent: #04122e; --ard-accent: #5B8DFF; --ard-accent-hover: #7DA6FF; --ard-accent-active: #A9C4FF; --ard-accent-ink: #7DA6FF; --ard-accent-2: #38BDF8; --ard-accent-tint: rgba(91, 141, 255, 0.12); --ard-accent-tint-2: rgba(91, 141, 255, 0.20); --ard-accent-border: rgba(91, 141, 255, 0.45); --ard-accent-glow: rgba(91, 141, 255, 0.30); --ard-ok: #34d39f; --ard-ok-ink: #4ade9b; --ard-ok-tint: rgba(52, 211, 159, 0.14); --ard-ok-border: rgba(52, 211, 159, 0.38); --ard-warn: #ffb648; --ard-warn-ink: #f5b544; --ard-warn-tint: rgba(255, 182, 72, 0.14); --ard-warn-border: rgba(255, 182, 72, 0.38); --ard-danger: #ff6b6b; --ard-danger-ink: #ff8b84; --ard-danger-tint: rgba(255, 107, 107, 0.14); --ard-danger-border: rgba(255, 107, 107, 0.38); --ard-info: #5B8DFF; --ard-info-ink: #7da6ff; --ard-info-tint: rgba(91, 141, 255, 0.14); --ard-info-border: rgba(91, 141, 255, 0.38); --ard-neutral: #8d93ab; --ard-neutral-ink: #b6bcd0; --ard-neutral-tint: rgba(141, 147, 171, 0.14); --ard-neutral-border: rgba(141, 147, 171, 0.32); --ard-critical: #ff4d4d; --ard-critical-ink: #1a0505; --ard-nodata-ink: #969cb3; --ard-nodata-border: #3a4568; --ard-prelim: #d9a431; --ard-prelim-tint: rgba(217, 164, 49, 0.16); --ard-country-ph: #6aa9ff; --ard-country-sg: #b191ff; --ard-country-my: #4fd6c4; --ard-country-id: #ff9f5c; --ard-chart-axis: #6e7590; --ard-chart-gridline: #1b2540; --ard-chart-pos: #34d39f; --ard-chart-neg: #ff6b6b; --ard-sh-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.28); --ard-sh-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(0, 0, 0, 0.38); --ard-sh-3: 0 10px 24px rgba(0, 0, 0, 0.5), 0 30px 70px rgba(0, 0, 0, 0.5); --ard-focus-ring: 0 0 0 2px var(--ard-bg), 0 0 0 4px var(--ard-accent); color-scheme: dark; } /* Respect an explicit OS preference for apps that opt in with .ard-auto-theme. */ @media (prefers-color-scheme: dark) { .ard-auto-theme:not([data-theme="light"]) { color-scheme: dark; } }