/* ============================================================================ J.D. Pools — Canonical Brand Tokens (single source of truth) ---------------------------------------------------------------------------- This is the ONE place the JD Pools visual language is defined. Every app — the shadcn Next.js apps (it-portal, task-coordination, quotation-portal) and the DaisyUI React app (claims-track) — should derive its colors, type, radius and status palette from these values. Layers in this file: 1. --brand-* Raw, framework-neutral brand scale (the real hex values). 2. shadcn map --background/--primary/... aliased to the brand scale so the Next.js apps can @import this file and delete their own duplicated :root block. 3. --status-* Shared status palette (pastel bg + readable fg) so a "closed" chip looks identical in claims-track and elsewhere. Mirrors assets.jdpoolstech.com. Light-first by design (see claims-track ADR 0023 — the field/mobile tool stays light-only; do not force dark on it). VALIDATED against jdpools.com (WordPress/WooCommerce storefront), 2026-07-24: ✅ Prompt is the brand body font (85 declarations on the live site). ✅ --brand-indigo #181D4E is an EXACT match to the site's own theme palette token `--wp--preset--color--text-dark: #181D4E`. ✅ --brand-neutral-050 #F4F5F9 matches the site bg-color #F4F8FA (cool near-white). ✅ Chrome COLLAPSED to the single ink #181D4E (2026-07-24) — matching the storefront, which uses one dark (#181D4E) for text and chrome alike. The prior distinct navy #181C38 is retired; --brand-navy is now an alias. ✅ --brand-orange #F3940D matches the storefront accent (link #F3940D, hover #DB8408) — DEEPENED from the apps' prior #EFA758 for parity (decision 2026-07-24). NOTE: this changes the accent in 3 live apps; re-check each visually before shipping. Site also uses blue links (#096BF0). 🟡 DM Sans (headings) is an app-level addition; not used on jdpools.com. ============================================================================ */ :root { /* ---- 1. Raw brand scale -------------------------------------------------- */ --brand-indigo: #181d4e; /* THE single dark ink — text AND chrome */ --brand-navy: #181d4e; /* alias → collapsed to indigo 2026-07-24 */ --brand-orange: #f3940d; /* accent — focus rings, highlights, CTAs (jdpools.com link) */ --brand-orange-strong: #db8408; /* accent hover / active (jdpools.com hover) */ --brand-white: #ffffff; --brand-neutral-050: #f4f5f9; /* muted surface */ --brand-neutral-100: #f1f2f7; /* secondary surface */ --brand-neutral-200: #e6e8f0; /* borders */ --brand-neutral-300: #d8dbe8; /* inputs / dividers */ --brand-neutral-400: #a9aec6; /* disabled / faint */ --brand-neutral-500: #6a6f87; /* muted text */ --brand-danger: #dc2626; /* Data-visualization hues. The chrome palette (indigo + orange + neutrals) cannot carry a chart with three year-series AND a sales/collection split at once. #096bf0 is jdpools.com's own link blue — noted in the header above but never tokenized until sales-performance became the first data-viz consumer. */ --brand-blue: #096bf0; --brand-blue-soft: #dce9fb; /* pale fill; equals --status-waiting-bg */ /* Directional pair for "better/worse" readouts. The --status-*-fg colours are tuned for text on their own pastel chip and read muddy standing alone, so these are brighter siblings for borders, fills and series. */ --brand-green: #16a34a; --brand-red: #dc2626; /* = --brand-danger, named for directional use */ /* Fonts. Body = Prompt (covers Latin + Thai). Headings = DM Sans → Prompt. claims-track currently self-hosts Sarabun; to match, self-host Prompt the same way (add its woff2 + @font-face) and keep Sarabun/Noto as fallback. */ --brand-font-sans: 'Prompt', 'Sarabun', 'Noto Sans Thai', system-ui, -apple-system, sans-serif; --brand-font-heading: 'DM Sans', 'Prompt', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif; --brand-font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace; /* Radius — 14px box; steps mirror the shadcn --radius scale. */ --brand-radius: 0.875rem; /* 14px — cards/boxes */ --brand-radius-sm: calc(var(--brand-radius) - 7px);/* ~7px — chips */ --brand-radius-md: calc(var(--brand-radius) - 4px);/* ~10px — buttons/inputs */ /* Elevation — soft, low-contrast (brand is calm/light). */ --brand-shadow-sm: 0 1px 2px rgba(24, 28, 56, 0.06); --brand-shadow: 0 2px 8px rgba(24, 28, 56, 0.08); --brand-shadow-lg: 0 8px 24px rgba(24, 28, 56, 0.12); /* Chart palette. Ordered for maximum separation at small sizes: two brand hues, then blue, then neutrals as receding historical series. */ --brand-chart-1: var(--brand-indigo); --brand-chart-2: var(--brand-orange); --brand-chart-3: var(--brand-blue); --brand-chart-4: var(--brand-neutral-500); --brand-chart-5: var(--brand-neutral-300); /* ---- 2. shadcn semantic map (Next.js apps) ------------------------------- */ --background: var(--brand-white); --foreground: var(--brand-indigo); --card: var(--brand-white); --card-foreground: var(--brand-indigo); --popover: var(--brand-white); --popover-foreground: var(--brand-indigo); --primary: var(--brand-navy); --primary-foreground: var(--brand-white); --secondary: var(--brand-neutral-100); --secondary-foreground: var(--brand-navy); --muted: var(--brand-neutral-050); --muted-foreground: var(--brand-neutral-500); --accent: var(--brand-orange); --accent-foreground: var(--brand-navy); --destructive: var(--brand-danger); --destructive-foreground: var(--brand-white); --border: var(--brand-neutral-200); --input: var(--brand-neutral-300); --ring: var(--brand-orange); --radius: var(--brand-radius); --chart-1: var(--brand-chart-1); --chart-2: var(--brand-chart-2); --chart-3: var(--brand-chart-3); --chart-4: var(--brand-chart-4); --chart-5: var(--brand-chart-5); --sidebar: var(--brand-neutral-050); --sidebar-foreground: var(--brand-indigo); --sidebar-primary: var(--brand-navy); --sidebar-primary-foreground: var(--brand-white); --sidebar-accent: var(--brand-orange); --sidebar-accent-foreground: var(--brand-navy); --sidebar-border: var(--brand-neutral-200); --sidebar-ring: var(--brand-orange); /* ---- 3. Shared status palette (pastel bg + readable fg) ------------------ */ /* Use these for ANY status chip so the same state reads the same everywhere. Names are semantic (not claim-specific) so every app can map onto them. */ --status-new-bg: #e8e7f8; --status-new-fg: #1a1760; /* violet */ --status-accepted-bg: #d4f0e6; --status-accepted-fg: #0a5c42; /* teal */ --status-progress-bg: #fcebcf; --status-progress-fg: #92500a; /* amber */ --status-waiting-bg: #dce9fb; --status-waiting-fg: #1b3a6b; /* blue */ --status-done-bg: #d6eec4; --status-done-fg: #2d5a0e; /* green */ --status-neutral-bg: #eceef4; --status-neutral-fg: #3a3f57; /* grey */ --status-danger-bg: #fbe0e0; --status-danger-fg: #9b1c1c; /* red */ }