/* ============================================================ V2X Design Tokens — MWR-APP-PUBLIC Full-navy surface direction. Load order: bootstrap.min.css -> tokens.css -> public.css Pairs with . Mirrors MWR-APP-ADMIN/wwwroot/css/tokens.css (admin Phase 1) verbatim, with PUBLIC-ONLY additions appended at the end. ============================================================ */ /* ---- Self-hosted brand fonts (place woff2 in /wwwroot/font/) ---- Adjust src filenames to match the files you actually drop in. */ @font-face{font-family:"Archivo";src:url("/font/archivo-variable.woff2") format("woff2");font-weight:400 800;font-display:swap;} @font-face{font-family:"Inter";src:url("/font/inter-variable.woff2") format("woff2");font-weight:400 700;font-display:swap;} @font-face{font-family:"IBM Plex Mono";src:url("/font/ibm-plex-mono.woff2") format("woff2");font-weight:400 600;font-display:swap;} :root{ /* V2X palette */ --v2x-navy-900:#010822; --v2x-navy-850:#020B27; --v2x-navy-800:#030A24; --v2x-navy-700:#0A1430; --v2x-navy-600:#13203F; --v2x-accent:#2B89C9; --v2x-accent-400:#3DA0E0; --v2x-accent-600:#1E6FA8; --v2x-text:#F4F8FF; --v2x-muted:#8A97AE; --v2x-subtle:#6F839C; --v2x-success:#3BA776; --v2x-danger:#D85565; --v2x-warning:#E0A53D; --v2x-hairline:rgba(255,255,255,.10); --v2x-hairline-strong:rgba(255,255,255,.20); /* Tone RGB companions — for rgba() fills in component CSS (status badges, stat tiles) */ --v2x-success-rgb:59,167,118; --v2x-danger-rgb:216,85,101; --v2x-warning-rgb:224,165,61; --v2x-accent-rgb:43,137,201; --v2x-muted-rgb:138,151,174; /* Brand type */ --v2x-font-display:"Sora","Archivo","Arial Narrow",system-ui,sans-serif; --v2x-font-body:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif; --v2x-font-mono:"IBM Plex Mono",ui-monospace,monospace; /* Wordmark and page-heading font — shared by the public shell and headings so each page stays aligned with the home refactor. */ --v2x-font-brand:var(--v2x-font-display); /* Off-white surface highlight (KPI values on warning tiles, mockup parity) */ --v2x-off-white:#F4F8FF; /* Spacing scale (Phase 4a — mirrors the mockup's --s1..--s7 rhythm) */ --v2x-s1:4px; --v2x-s2:8px; --v2x-s3:12px; --v2x-s4:16px; --v2x-s5:24px; --v2x-s6:32px; --v2x-s7:48px; /* Motion + focus glow + shell (Phase 4a) */ --v2x-ease:cubic-bezier(.2,.6,.2,1); --v2x-glow:0 0 0 3px rgba(43,137,201,.30); --v2x-sidebar:250px; /* matches style.css --sidebar-width (single source for the shell width) */ /* ---- Phase 4b: surface scale (DARK defaults — alias the navy ramp so any component written against --v2x-surf-* works in both themes) ---- */ --v2x-surf-0:var(--v2x-navy-800); /* card / widget / panel background */ --v2x-surf-1:var(--v2x-navy-850); /* sidebar / table-header / legend inset */ --v2x-surf-2:var(--v2x-navy-700); /* subtle inset / free slot / mini-btn bg */ --v2x-surf-3:var(--v2x-navy-600); /* count badge / avatar / divider */ --v2x-surf-4:var(--v2x-navy-600); /* strong border / disabled */ /* Accent + status tints (DARK) */ --v2x-accent-tint:rgba(43,137,201,.12); --v2x-accent-tint-strong:rgba(43,137,201,.18); --v2x-success-tint:rgba(var(--v2x-success-rgb),.14); --v2x-danger-tint:rgba(var(--v2x-danger-rgb),.14); --v2x-warning-tint:rgba(var(--v2x-warning-rgb),.14); /* Bakery status colours — Phase 5c (CakeOrderStatus accents; tints reuse the tone ramps) */ --v2x-bk-new: #9B59B6; --v2x-bk-new-t: rgba(155,89,182,.14); --v2x-bk-acc: var(--v2x-accent); --v2x-bk-acc-t: var(--v2x-accent-tint); --v2x-bk-prog: var(--v2x-warning); --v2x-bk-prog-t: rgba(224,165,61,.14); --v2x-bk-ready: var(--v2x-success); --v2x-bk-ready-t: rgba(59,167,118,.14); --v2x-bk-done: var(--v2x-muted); --v2x-bk-done-t: rgba(111,131,156,.14); --v2x-bk-cancel: var(--v2x-danger); --v2x-bk-cancel-t:rgba(216,85,101,.14); /* Elevation — dark mode is flat (no shadows); light mode sets real values */ --v2x-shadow-sm:none; --v2x-shadow-md:none; /* Sharp corners everywhere (override Bootstrap radii) */ --bs-border-radius:0; --bs-border-radius-sm:0; --bs-border-radius-lg:0; --bs-border-radius-xl:0; --bs-border-radius-xxl:0; --bs-border-radius-pill:999px; /* Drive Bootstrap body font + size globally */ --bs-body-font-family:var(--v2x-font-body); --bs-body-font-size:.95rem; /* ~15px */ } /* ---- Bootstrap dark-mode surface mapping (FULL NAVY) ---- */ [data-bs-theme="dark"]{ --bs-body-bg:var(--v2x-navy-900); --bs-body-color:var(--v2x-text); --bs-emphasis-color:#fff; --bs-secondary-color:var(--v2x-muted); --bs-tertiary-color:var(--v2x-subtle); --bs-secondary-bg:var(--v2x-navy-800); /* inputs / subtle fills */ --bs-tertiary-bg:var(--v2x-navy-850); --bs-border-color:var(--v2x-hairline); --bs-border-color-translucent:var(--v2x-hairline); --bs-primary:var(--v2x-accent); --bs-primary-rgb:43,137,201; --bs-link-color:var(--v2x-accent-400); --bs-link-color-rgb:61,160,224; --bs-link-hover-color:var(--v2x-accent); /* component surfaces */ --bs-card-bg:var(--v2x-navy-800); --bs-card-border-color:var(--v2x-hairline); --bs-modal-bg:var(--v2x-navy-800); --bs-modal-border-color:var(--v2x-hairline); --bs-dropdown-bg:var(--v2x-navy-800); --bs-dropdown-border-color:var(--v2x-hairline); --bs-table-color:var(--v2x-text); --bs-table-bg:transparent; --bs-table-border-color:var(--v2x-hairline); } /* ============================================================ V2X Phase 4b — LIGHT THEME token overrides. Activated by `data-theme="light"` on (written by the toggle / FOUC guard), with a `prefers-color-scheme:light` progressive fallback for the no-JS case. Redefining the core --v2x-* palette VALUES here flips every token-driven component (dashboard, sidebar, topbar, board) with no per-class work. The accent ramp (--v2x-accent*) is intentionally NOT overridden. ============================================================ */ :root[data-theme="light"]{ /* palette → light surfaces (navy ramp repointed) */ --v2x-navy-900:#F5F7FA; --v2x-navy-850:#F5F7FA; --v2x-navy-800:#FFFFFF; --v2x-navy-700:#EDF1F7; --v2x-navy-600:#E2E8F3; /* surface scale (light, explicit) */ --v2x-surf-0:#FFFFFF; --v2x-surf-1:#F5F7FA; --v2x-surf-2:#EDF1F7; --v2x-surf-3:#E2E8F3; --v2x-surf-4:#CDD6E8; /* text */ --v2x-text:#0B1526; --v2x-muted:#4A5A76; --v2x-subtle:#7A8BA8; --v2x-off-white:#0B1526; /* "off-white" was the bright KPI value on dark; flip to dark ink */ /* borders */ --v2x-hairline:rgba(11,21,38,.09); --v2x-hairline-strong:rgba(11,21,38,.20); /* status — slightly more saturated for on-white legibility */ --v2x-success:#1E9E6A; --v2x-danger:#C63047; --v2x-warning:#C47D1A; --v2x-success-rgb:30,158,106; --v2x-danger-rgb:198,48,71; --v2x-warning-rgb:196,125,26; --v2x-muted-rgb:74,90,118; /* tints + glow + elevation */ --v2x-accent-tint:rgba(43,137,201,.08); --v2x-accent-tint-strong:rgba(43,137,201,.16); --v2x-success-tint:rgba(30,158,106,.09); --v2x-danger-tint:rgba(198,48,71,.09); --v2x-warning-tint:rgba(196,125,26,.09); --v2x-glow:0 0 0 3px rgba(43,137,201,.22); --v2x-shadow-sm:0 1px 3px rgba(11,21,38,.08), 0 1px 2px rgba(11,21,38,.06); --v2x-shadow-md:0 4px 12px rgba(11,21,38,.08), 0 2px 4px rgba(11,21,38,.06); } /* Progressive fallback: honour the OS preference when no explicit theme is set (e.g. JavaScript disabled, so the FOUC guard never wrote data-theme). */ @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){ --v2x-navy-900:#F5F7FA; --v2x-navy-850:#F5F7FA; --v2x-navy-800:#FFFFFF; --v2x-navy-700:#EDF1F7; --v2x-navy-600:#E2E8F3; --v2x-surf-0:#FFFFFF; --v2x-surf-1:#F5F7FA; --v2x-surf-2:#EDF1F7; --v2x-surf-3:#E2E8F3; --v2x-surf-4:#CDD6E8; --v2x-text:#0B1526; --v2x-muted:#4A5A76; --v2x-subtle:#7A8BA8; --v2x-off-white:#0B1526; --v2x-hairline:rgba(11,21,38,.09); --v2x-hairline-strong:rgba(11,21,38,.20); --v2x-success:#1E9E6A; --v2x-danger:#C63047; --v2x-warning:#C47D1A; --v2x-success-rgb:30,158,106; --v2x-danger-rgb:198,48,71; --v2x-warning-rgb:196,125,26; --v2x-muted-rgb:74,90,118; --v2x-accent-tint:rgba(43,137,201,.08); --v2x-accent-tint-strong:rgba(43,137,201,.16); --v2x-success-tint:rgba(30,158,106,.09); --v2x-danger-tint:rgba(198,48,71,.09); --v2x-warning-tint:rgba(196,125,26,.09); --v2x-glow:0 0 0 3px rgba(43,137,201,.22); --v2x-shadow-sm:0 1px 3px rgba(11,21,38,.08), 0 1px 2px rgba(11,21,38,.06); --v2x-shadow-md:0 4px 12px rgba(11,21,38,.08), 0 2px 4px rgba(11,21,38,.06); } } /* ---- Bootstrap LIGHT surface mapping (chrome cohesion). The toggle moves data-bs-theme in lockstep with data-theme, so these resolve against the light --v2x-* values above. ---- */ [data-bs-theme="light"]{ --bs-body-bg:var(--v2x-surf-1); --bs-body-color:var(--v2x-text); --bs-emphasis-color:#000; --bs-secondary-color:var(--v2x-muted); --bs-tertiary-color:var(--v2x-subtle); --bs-secondary-bg:var(--v2x-surf-0); --bs-tertiary-bg:var(--v2x-surf-2); --bs-border-color:var(--v2x-hairline); --bs-border-color-translucent:var(--v2x-hairline); --bs-primary:var(--v2x-accent); --bs-primary-rgb:43,137,201; --bs-link-color:var(--v2x-accent-600); --bs-link-color-rgb:30,111,168; --bs-link-hover-color:var(--v2x-accent); --bs-card-bg:var(--v2x-surf-0); --bs-card-border-color:var(--v2x-hairline); --bs-modal-bg:var(--v2x-surf-0); --bs-modal-border-color:var(--v2x-hairline); --bs-dropdown-bg:var(--v2x-surf-0); --bs-dropdown-border-color:var(--v2x-hairline); --bs-table-color:var(--v2x-text); --bs-table-bg:transparent; --bs-table-border-color:var(--v2x-hairline); } /* ---- Headings use the display face; mono for data ---- */ h1,h2,h3,h4,.h1,.h2,.h3,.h4{font-family:var(--v2x-font-display);letter-spacing:.02em;} code,kbd,samp,.text-mono{font-family:var(--v2x-font-mono);} /* ---- Primary button = solid V2X blue, sharp ---- */ .btn-primary{ --bs-btn-bg:var(--v2x-accent); --bs-btn-border-color:var(--v2x-accent); --bs-btn-hover-bg:var(--v2x-accent-400); --bs-btn-hover-border-color:var(--v2x-accent-400); --bs-btn-active-bg:var(--v2x-accent-600); --bs-btn-active-border-color:var(--v2x-accent-600); --bs-btn-color:#fff; --bs-btn-hover-color:#fff; } /* ---- Accent focus ring (salvaged intent from dead custom-style.css) ---- */ :focus-visible{outline:2px solid var(--v2x-accent-400);outline-offset:2px;} /* ────────────────────────────────────────────────────────── PUBLIC-ONLY ADDITIONS ────────────────────────────────────────────────────────── */ :root { /* Public shell width — mockup sidebar is narrower than admin's 250px */ --v2x-sidebar:220px; /* Bottom tab bar height — used by scroll-area padding-bottom */ --tabbar-height: 64px; /* Public theme-aware aliases used by shared component CSS. */ --navy-900:var(--v2x-navy-900); --navy-700:var(--v2x-navy-700); --surface:var(--v2x-surf-1); --card:var(--v2x-surf-0); --row:var(--v2x-surf-2); --accent:var(--v2x-accent); --accent-600:var(--v2x-accent-600); --accent-dim:var(--v2x-accent-tint); --success:var(--v2x-success); --success-dim:var(--v2x-success-tint); --text:var(--v2x-text); --muted:var(--v2x-muted); --subtle:var(--v2x-subtle); --bd:var(--v2x-hairline); --sh-sm:var(--v2x-shadow-sm); --sh-md:var(--v2x-shadow-md); --fd:var(--v2x-font-brand); --fb:var(--v2x-font-body); --fm:var(--v2x-font-mono); --radius:16px; --on-accent:#FFFFFF; --sh-home-dark:0 14px 34px rgba(0,0,0,.28); /* Service card accent overrides per category */ --card-accent-wheels : var(--v2x-accent); /* Island Wheels → blue */ --card-accent-lagoon : var(--v2x-success); /* Lagoon Days → green */ --card-accent-events : var(--v2x-warning); /* Event Gear → amber */ --card-accent-spaces : var(--v2x-accent); /* Island Spaces → blue */ --card-accent-bakery : var(--v2x-warning); /* Sweet Treats → amber */ }