/* ============================================================================= AgroLink shared design tokens · --al-* custom properties ----------------------------------------------------------------------------- Source of truth: the v10 investor-demo showcase (Docs/spec/agrolink2 (1).html), rendered in a browser and measured via Playwright computed styles (P0.2f). TDW §4.4 — all six surfaces inherit the showcase's visual identity from here. Provenance and per-token measurement notes: Docs/spec/design-tokens.md. Do NOT hand-edit values to "look nicer" — re-measure the showcase and update both this file and design-tokens.md together (§1.1 visual-is-canonical). The showcase is a single DARK theme with a green-black background family, a warm off-white ink hierarchy, and ONE accent (signal green) shared across all six personas. Per-app accent slots exist below but default to signal — the showcase does not differentiate personas by colour (see design-tokens.md §2). ============================================================================ */ :root { /* --- Backgrounds — green-black, darkest → raised (measured off :root) -------- */ --al-bg-0: #0a0c0a; /* page / app shell base */ --al-bg-1: #0f1210; /* surface */ --al-bg-2: #141815; /* raised surface / card */ --al-bg-3: #1a1f1b; /* raised 2 / input, nested card */ --al-bg-4: #222924; /* raised 3 / hover, active row */ --al-bg-app: #0e1510; /* in-app canvas (phone-screen bg) */ /* --- Ink — warm off-white hierarchy (measured off :root) -------------------- */ --al-ink-0: #f5f1e8; /* primary text, headings, data */ --al-ink-1: #d8d4c8; /* body / secondary */ --al-ink-2: #9a988f; /* muted / supporting */ --al-ink-3: #5e5d58; /* faint / caps eyebrows / disabled */ /* --- Lines / borders — translucent white (measured off :root) --------------- */ --al-line-1: rgba(255,255,255,.06); /* hairline, table rules */ --al-line-2: rgba(255,255,255,.10); /* default border, inputs */ --al-line-3: rgba(255,255,255,.18); /* emphasised border */ /* --- Semantic / status ------------------------------------------------------ */ /* signal = success / positive / primary accent */ --al-signal: #7bd389; --al-signal-bg: rgba(123,211,137,.08); --al-signal-dim: #4a8a55; /* muted signal (met-but-secondary) */ --al-signal-line: rgba(123,211,137,.40); /* pill / focus border (measured) */ --al-signal-tint: rgba(123,211,137,.04); /* selected table row (measured) */ /* amber = warn / pending / provisional money (voucher, HOLD, NEW) */ --al-amber: #e0b765; --al-amber-bg: rgba(224,183,101,.10); --al-amber-line: rgba(224,183,101,.40); /* derived to match signal-line */ /* red = error / danger / dispute */ --al-red: #d67560; --al-red-bg: rgba(214,117,96,.10); --al-red-line: rgba(214,117,96,.40); /* derived to match signal-line */ /* cool = info / neutral accent */ --al-cool: #7aa8c9; --al-cool-bg: rgba(122,168,201,.10); /* derived — showcase has no cool-bg */ --al-cool-line: rgba(122,168,201,.40); /* derived */ /* --- Escrow 5-condition states --------------------------------------------- The showcase does NOT use five distinct colours; condition states reuse the status semantics. Aliased here so escrow UI reads by intent, not by colour. */ --al-cond-met: var(--al-signal); /* .cond-row.done ✓ (measured) */ --al-cond-met-bg: var(--al-signal-bg); --al-cond-pending: var(--al-amber); /* awaiting */ --al-cond-pending-bg: var(--al-amber-bg); --al-cond-failed: var(--al-red); /* dispute / not met */ --al-cond-failed-bg: var(--al-red-bg); --al-cond-neutral: var(--al-ink-3); /* not-yet-evaluated */ /* --- Simulated-money badge (CLAUDE.md §4 mandate) -------------------------- NOT present in the showcase — an invariant of the BUILD, not the spec. Amber family: matches the showcase's existing "provisional money" coding (ring-fenced voucher balances render amber). Every simulated ₦ amount in every surface must carry this badge. */ --al-sim-fg: var(--al-amber); --al-sim-bg: var(--al-amber-bg); --al-sim-line: var(--al-amber-line); /* --- Accent — single canonical accent (showcase is monochrome-green) -------- */ --al-accent: var(--al-signal); --al-accent-bg: var(--al-signal-bg); --al-accent-line: var(--al-signal-line); /* Per-app accent slots. Canonically ALL = signal (matches the v10 spec). A candidate differentiated palette is proposed in design-tokens.md §2 but is NOT applied here — it is not measured from the showcase and awaits operator sign-off. To differentiate later, override these + add .al-app-* below. */ --al-accent-farmer: var(--al-signal); --al-accent-agent: var(--al-signal); --al-accent-distributor: var(--al-signal); --al-accent-lender: var(--al-signal); --al-accent-offtaker: var(--al-signal); --al-accent-admin: var(--al-signal); /* --- Typography — families with fallback stacks ----------------------------- */ --al-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; --al-font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* F-b (A1.5 rider R2): 'IBM Plex Sans' sits before the generic tail as the NAIRA GLYPH DONOR. JetBrains Mono has no U+20A6 and neither does the Android WebView's generic monospace (device-observed tofu on every money surface); Plex is already bundled by every app and its latin-ext face covers U+20A0-20AB, so the naira sign per-glyph-falls back to a glyph we ship. Digits never reach it - JetBrains Mono serves them. Keep this chain in lockstep with tailwind.preset.cjs. */ --al-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, 'IBM Plex Sans', monospace; /* Type scale — measured px per role (see design-tokens.md §3). Display = Instrument Serif; body/labels = IBM Plex Sans; data = JetBrains Mono. */ --al-text-display-xl: 76px; --al-lh-display-xl: 0.98; --al-ls-display-xl: -0.76px; /* hero */ --al-text-display-l: 46px; --al-lh-display-l: 1.05; --al-ls-display-l: -0.46px; /* stage title */ --al-text-display-m: 40px; --al-lh-display-m: 1.00; --al-ls-display-m: -0.40px; /* page title */ --al-text-display-s: 32px; --al-lh-display-s: 1.05; --al-ls-display-s: -0.20px; /* section */ --al-text-serif-lead: 22px; --al-lh-serif-lead: 1.10; /* serif lead */ --al-text-serif-card: 18px; --al-lh-serif-card: 1.50; /* card title */ --al-text-body-l: 17px; --al-lh-body-l: 1.55; /* intro paragraph */ --al-text-body-m: 13px; --al-lh-body-m: 1.50; /* default / table body */ --al-text-body-s: 12px; --al-lh-body-s: 1.50; /* caption */ --al-text-label: 10px; --al-lh-label: 1.50; --al-ls-label: 1.2px; /* caps eyebrow (500) */ --al-text-nav: 11px; --al-lh-nav: 1.50; --al-ls-nav: 1.1px; /* nav caps */ --al-text-data-l: 20px; --al-lh-data-l: 1.50; /* big data / stat number (mono) */ --al-text-data-m: 13px; --al-lh-data-m: 1.50; /* inline amount (mono) */ --al-text-data-s: 10px; --al-lh-data-s: 1.50; --al-ls-data-s: 0.5px; /* pill / tag (mono) */ --al-weight-light: 300; --al-weight-normal: 400; --al-weight-medium: 500; --al-weight-semibold: 600; /* --- Shape — radii (measured; see design-tokens.md §4) ---------------------- App-content dominant radius is 8px (lg). Small chips/pills/controls use 2px. :root of the showcase also declares 3px & 6px (--radius-1/2) — kept as sm/md. */ --al-radius-xs: 2px; /* pills, tags, dense controls */ --al-radius-sm: 3px; /* showcase --radius-1 */ --al-radius-md: 6px; /* showcase --radius-2 */ --al-radius-lg: 8px; /* buttons, cards, inputs (dom.) */ --al-radius-pill: 999px; --al-radius-frame: 34px; /* device frame (reference only, not app UI) */ /* --- Depth — the showcase is flat / border-driven; shadow is reserved ------- */ --al-shadow-frame: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -20px rgba(0,0,0,.80), 0 10px 40px -10px rgba(0,0,0,.60); /* device / modal */ --al-glow-signal: 0 0 6px 0 rgba(123,211,137,.50); /* active / focus glow */ --al-shadow-none: none; /* default elevation */ /* --- Spacing — 4px base unit; primary rhythm on 4px steps ------------------- (measured gaps/paddings cluster on 4px; 14/18/22 appear as drift — see §4). */ --al-space-1: 2px; --al-space-2: 4px; --al-space-3: 8px; --al-space-4: 12px; --al-space-5: 16px; --al-space-6: 20px; --al-space-7: 24px; --al-space-8: 32px; --al-space-9: 48px; } /* ============================================================================= Per-app accent scoping. Add a class to an app's root (e.g. ) to rebind --al-accent to that persona's slot. Canonically every slot resolves to signal green, so today these are visually identical — the mechanism is ready for the proposed differentiated palette (design-tokens.md §2) once approved. ============================================================================ */ .al-app-farmer { --al-accent: var(--al-accent-farmer); --al-accent-bg: var(--al-signal-bg); } .al-app-agent { --al-accent: var(--al-accent-agent); --al-accent-bg: var(--al-signal-bg); } .al-app-distributor { --al-accent: var(--al-accent-distributor); --al-accent-bg: var(--al-signal-bg); } .al-app-lender { --al-accent: var(--al-accent-lender); --al-accent-bg: var(--al-signal-bg); } .al-app-offtaker { --al-accent: var(--al-accent-offtaker); --al-accent-bg: var(--al-signal-bg); } .al-app-admin { --al-accent: var(--al-accent-admin); --al-accent-bg: var(--al-signal-bg); }