mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-10-01 16:43:13 +00:00
042b9db2ac
* fix: correct Sea Haven branding in page title and wordmark * chore: use correct company name in docs and comments * docs: rewrite README * docs: add README badge block per github-standards * fix: update command syntax in deployment instructions * fix: replace template PWA icons and manifest branding * test: assert PWA manifest branding
292 lines
11 KiB
CSS
292 lines
11 KiB
CSS
:root {
|
|
/* Body typography reference — do not set on html (rem/Tailwind use 16px root) */
|
|
--font-size: 14px;
|
|
|
|
/* ── TYPOGRAPHY (runtime CSS vars — used by inline styles + Tailwind) */
|
|
--font-family-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
|
|
--font-family-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
|
|
--font-family-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
--font-display: var(--font-family-display);
|
|
--font-sans: var(--font-family-sans);
|
|
--font-mono: var(--font-family-mono);
|
|
--font-heading: var(--font-family-display);
|
|
|
|
/* ── TYPOGRAPHY SCALE ───────────────────────────────────────────── */
|
|
--text-xs: 11px;
|
|
--text-sm: 12px;
|
|
--text-base-sm: 13px;
|
|
--text-base: 14px;
|
|
--text-md: 16px;
|
|
--text-lg: 18px;
|
|
--text-xl: 22px;
|
|
--text-2xl: 28px;
|
|
--leading-tight: 1.25;
|
|
--leading-normal: 1.5;
|
|
--leading-relaxed: 1.625;
|
|
--tracking-tight: -0.01em;
|
|
--tracking-normal: 0;
|
|
--tracking-wide: 0.05em;
|
|
--tracking-wider: 0.08em;
|
|
|
|
/* ── LAYOUT SPACING ─────────────────────────────────────────────── */
|
|
--spacing-sidebar: 244px;
|
|
--spacing-topbar: 64px;
|
|
--spacing-sidebar-collapsed: 76px;
|
|
|
|
/* ── RADIUS SCALE (scale resolves to 4 / 6 / 8 / 12) ────────────── */
|
|
--radius: 8px;
|
|
--radius-md: 6px;
|
|
--radius-sm: 4px;
|
|
--radius-xl: 12px;
|
|
|
|
/* ── ELEVATION ──────────────────────────────────────────────────── */
|
|
--shadow-sm: 0 1px 3px rgba(22, 30, 56, 0.06), 0 1px 2px rgba(22, 30, 56, 0.04);
|
|
--shadow-md: 0 4px 6px -1px rgba(22, 30, 56, 0.08), 0 2px 4px -2px rgba(22, 30, 56, 0.06);
|
|
--shadow-lg: 0 10px 15px -3px rgba(22, 30, 56, 0.1), 0 4px 6px -4px rgba(22, 30, 56, 0.08);
|
|
--shadow-brand-mark: 0 2px 6px -1px rgba(28, 117, 188, 0.45);
|
|
|
|
/* ── SHADCN BASE (Sea Haven DS) ──────────────────────────────────── */
|
|
--background: #ffffff;
|
|
--foreground: #262262;
|
|
--placeholder-foreground: color-mix(in srgb, var(--foreground) 50%, transparent);
|
|
--card: #ffffff;
|
|
--card-foreground: #262262;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #262262;
|
|
--primary: #1c75bc;
|
|
--primary-hover: #155a92;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #f1f4f9;
|
|
--secondary-foreground: #262262;
|
|
--muted: #e6e7e8;
|
|
--muted-foreground: #58595b;
|
|
--accent: #27aae1;
|
|
--accent-foreground: #ffffff;
|
|
--success: #00a79d;
|
|
--warning: #d97706;
|
|
--destructive: #dc2626;
|
|
--destructive-foreground: #ffffff;
|
|
--border: #dfe3ea;
|
|
--border-hover: #c8d0e0;
|
|
--input: transparent;
|
|
--input-background: #f9fafb;
|
|
--switch-background: #c8d0e0;
|
|
--ring: #1c75bc;
|
|
|
|
--chart-1: #1c75bc;
|
|
--chart-2: #00a79d;
|
|
--chart-3: #d97706;
|
|
--chart-4: #7c3aed;
|
|
--chart-5: #dc2626;
|
|
|
|
/* ── SIDEBAR (light surface — Sea Haven DS) ──────────────────────── */
|
|
--sidebar: #f6f8fb;
|
|
--sidebar-bg: #f6f8fb;
|
|
--sidebar-foreground: #262262;
|
|
--sidebar-primary: #1c75bc;
|
|
--sidebar-primary-foreground: #ffffff;
|
|
--sidebar-accent: #e6f4fb;
|
|
--sidebar-accent-foreground: #155a92;
|
|
--sidebar-border: #dfe3ea;
|
|
--sidebar-ring: #1c75bc;
|
|
|
|
/* ── SEAHAVEN SEMANTIC ALIASES (consumed across the app) ────────── */
|
|
--color-primary: var(--primary);
|
|
--color-primary-hover: var(--primary-hover);
|
|
--color-primary-foreground: #ffffff;
|
|
--color-primary-tint: #e6f4fb;
|
|
--color-accent: var(--accent);
|
|
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--foreground);
|
|
--color-ring: var(--ring);
|
|
|
|
--color-bg-page: #f9fafb;
|
|
--color-bg-surface: var(--card);
|
|
--color-bg-muted: #f1f4f9;
|
|
--color-border: var(--border);
|
|
--color-border-hover: #c8d0e0;
|
|
--color-text-primary: var(--foreground);
|
|
--color-text-secondary: #58595b;
|
|
--color-text-muted: #6b7a96;
|
|
--color-text-inverse: #ffffff;
|
|
|
|
/* ── SIDEBAR ALIASES (light) ────────────────────────────────────── */
|
|
--color-sidebar-bg: var(--sidebar-bg);
|
|
--color-sidebar-text: #262262;
|
|
--color-sidebar-text-hover: #155a92;
|
|
--color-sidebar-active-bg: var(--sidebar-accent);
|
|
--color-sidebar-active-text: var(--sidebar-accent-foreground);
|
|
--color-sidebar-hover-bg: #eef2f7;
|
|
--color-sidebar-label: #6b7a96;
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-badge-bg: #e6f4fb;
|
|
--color-sidebar-badge-text: #155a92;
|
|
--color-sidebar-item-active-bg: var(--card);
|
|
--color-sidebar-item-active-shadow: 0 1px 3px rgba(38, 34, 98, 0.08);
|
|
|
|
/* ── SEMANTIC (universal meaning) ───────────────────────────────── */
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-fg: #ffffff;
|
|
--color-warning: var(--warning);
|
|
--color-success: var(--success);
|
|
|
|
/* ── WO TYPE TOKENS (immutable — CLAUDE.md §3) ──────────────────── */
|
|
--type-pm-bg: #eff6ff;
|
|
--type-pm-text: #1d4ed8;
|
|
--type-reactive-bg: #fff7ed;
|
|
--type-reactive-text: #c2410c;
|
|
--type-emergency-bg: #fef2f2;
|
|
--type-emergency-text: #b91c1c;
|
|
--type-addon-bg: #f5f3ff;
|
|
--type-addon-text: #6d28d9;
|
|
--type-overdue-bg: #fff1f2;
|
|
--type-overdue-text: #9f1239;
|
|
|
|
/* ── WO STATUS TOKENS (immutable) ───────────────────────────────── */
|
|
--status-incomplete-bg: #f3f4f6;
|
|
--status-incomplete-text: #374151;
|
|
--status-pending-bg: #fff7ed;
|
|
--status-pending-text: #92400e;
|
|
--status-scheduled-bg: #eff6ff;
|
|
--status-scheduled-text: #1e40af;
|
|
--status-inroute-bg: #f0f9ff;
|
|
--status-inroute-text: #0369a1;
|
|
--status-onsite-bg: #ecfdf5;
|
|
--status-onsite-text: #065f46;
|
|
--status-inprogress-bg: #eff6ff;
|
|
--status-inprogress-text: #1d4ed8;
|
|
--status-completed-bg: #f0fdf4;
|
|
--status-completed-text: #166534;
|
|
--status-rescheduled-bg: #fffbeb;
|
|
--status-rescheduled-text: #92400e;
|
|
--status-canceled-bg: #f9fafb;
|
|
--status-canceled-text: #6b7280;
|
|
--status-pendingquote-bg: #faf5ff;
|
|
--status-pendingquote-text: #6b21a8;
|
|
--status-pastdue-bg: #fff1f2;
|
|
--status-pastdue-text: #9f1239;
|
|
|
|
/* ── COMPLETION DOCUMENT (immutable) ────────────────────────────── */
|
|
--doc-yes-bg: #f0fdf4;
|
|
--doc-yes-text: #166534;
|
|
--doc-no-bg: #fff1f2;
|
|
--doc-no-text: #be123c;
|
|
--doc-nn-bg: #f3f4f6;
|
|
--doc-nn-text: #6b7280;
|
|
|
|
/* ── CARRIED OVER / RESCHEDULE INDICATORS (immutable) ───────────── */
|
|
--indicator-co-1-bg: #fffbeb;
|
|
--indicator-co-1-text: #92400e;
|
|
--indicator-co-2-bg: #fef3c7;
|
|
--indicator-co-2-text: #b45309;
|
|
--indicator-co-3-bg: #fef2f2;
|
|
--indicator-co-3-text: #9f1239;
|
|
|
|
/* ── SLA (immutable) ────────────────────────────────────────────── */
|
|
--sla-safe: #16a34a;
|
|
--sla-warning: #d97706;
|
|
--sla-critical: #dc2626;
|
|
|
|
/* ── LAB (experiment UI accents) ────────────────────────────────── */
|
|
--color-lab-accent-bg: #fef3c7;
|
|
--color-lab-accent-text: #92400e;
|
|
--color-lab-accent-border: #f59e0b;
|
|
|
|
/* ── HEADER (app shell top bar) ─────────────────────────────────── */
|
|
--color-header-bg-start: #1b1f52;
|
|
--color-header-bg-mid: #1c4f8f;
|
|
--color-header-bg-end: var(--primary);
|
|
--color-header-gradient: linear-gradient(
|
|
100deg,
|
|
var(--color-header-bg-start) 0%,
|
|
var(--color-header-bg-mid) 58%,
|
|
var(--color-header-bg-end) 100%
|
|
);
|
|
--color-header-shadow: 0 1px 0 rgba(38, 34, 98, 0.18), 0 6px 18px -10px rgba(28, 117, 188, 0.5);
|
|
--color-header-surface: rgba(255, 255, 255, 0.08);
|
|
--color-header-surface-hover: rgba(255, 255, 255, 0.18);
|
|
--color-header-chip-hover: rgba(255, 255, 255, 0.12);
|
|
--color-header-icon: #eaf3fb;
|
|
--color-header-text: #ffffff;
|
|
--color-header-text-muted: #bdd8f0;
|
|
--color-header-avatar-ring: rgba(255, 255, 255, 0.25);
|
|
|
|
/* ── SERVICE TYPE TOKENS (Completion Docs) ──────────────────────── */
|
|
--service-scrubber-pit-bg: #eff6ff;
|
|
--service-scrubber-pit-text: #1d4ed8;
|
|
--service-backflow-preventers-bg: #ecfdf5;
|
|
--service-backflow-preventers-text: #065f46;
|
|
--service-tank-water-heater-bg: #fff7ed;
|
|
--service-tank-water-heater-text: #c2410c;
|
|
--service-floor-drain-bg: #f0f9ff;
|
|
--service-floor-drain-text: #0369a1;
|
|
--service-hvac-bg: #f5f3ff;
|
|
--service-hvac-text: #6d28d9;
|
|
--service-parking-lot-lighting-bg: #fffbeb;
|
|
--service-parking-lot-lighting-text: #92400e;
|
|
--service-pumping-systems-bg: #faf5ff;
|
|
--service-pumping-systems-text: #6b21a8;
|
|
--service-door-hardware-bg: #f0fdf4;
|
|
--service-door-hardware-text: #166534;
|
|
--service-pressure-reducing-valve-bg: #fff1f2;
|
|
--service-pressure-reducing-valve-text: #9f1239;
|
|
--service-fire-suppression-bg: #fef2f2;
|
|
--service-fire-suppression-text: #b91c1c;
|
|
}
|
|
|
|
@theme inline {
|
|
--font-display: var(--font-family-display);
|
|
--font-sans: var(--font-family-sans);
|
|
--font-mono: var(--font-family-mono);
|
|
--font-heading: var(--font-family-display);
|
|
|
|
--spacing-sidebar: var(--spacing-sidebar);
|
|
--spacing-topbar: var(--spacing-topbar);
|
|
--spacing-sidebar-collapsed: var(--spacing-sidebar-collapsed);
|
|
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-input-background: var(--input-background);
|
|
--color-ring: var(--ring);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-success: var(--success);
|
|
--color-warning: var(--warning);
|
|
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
|
|
--shadow-sm: var(--shadow-sm);
|
|
--shadow-md: var(--shadow-md);
|
|
--shadow-lg: var(--shadow-lg);
|
|
}
|