Chaim
51064f3a03
Initialize shadcn/ui (radix-nova preset) and wire its semantic tokens to the editorial navy/cream/gold palette so primitives inherit the judicial voice without per-component overrides. Replace the Phase 2 live-probe with a real dashboard: KPI tiles, conic-gradient status donut (ported from the vanilla renderHero), and a TanStack Table cases list with search + sort. Add useCase(n) hook with 5s staleTime/refetchInterval to replace the old manual polling loop when Case Detail ships next. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
249 lines
8.6 KiB
CSS
249 lines
8.6 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
* Ezer Mishpati — Design Tokens
|
|
* Ported from legal-ai/web/static/design-system.css.
|
|
* Editorial/judicial aesthetic for a Hebrew RTL judicial tool.
|
|
* Palette: Navy + Cream + Gold. Typography: Heebo.
|
|
*
|
|
* shadcn semantic tokens (background, foreground, primary, etc.)
|
|
* are mapped onto this palette in the @theme inline block + :root
|
|
* further down, so shadcn primitives inherit the editorial voice.
|
|
* ══════════════════════════════════════════════════════════════ */
|
|
|
|
@theme {
|
|
/* ── Colors ─────────────────────────────────────────── */
|
|
--color-navy: #0f172a;
|
|
--color-navy-soft: #1e293b;
|
|
--color-navy-dim: #334155;
|
|
|
|
--color-cream: #f5f1e8;
|
|
--color-cream-deep: #ede8d8;
|
|
--color-parchment: #fbf8f0;
|
|
|
|
--color-gold: #a97d3a;
|
|
--color-gold-deep: #8b6428;
|
|
--color-gold-soft: #c89a56;
|
|
--color-gold-wash: #fdf6e8;
|
|
|
|
--color-ink: #1a1a2e;
|
|
--color-ink-soft: #3a3a52;
|
|
--color-ink-muted: #6b7280;
|
|
--color-ink-light: #9ca3af;
|
|
|
|
--color-rule: #e5dfd0;
|
|
--color-rule-soft: #f0ead8;
|
|
|
|
--color-surface: #ffffff;
|
|
--color-surface-raised: #fbf8f0;
|
|
--color-bg: #f5f1e8;
|
|
|
|
/* Status colors — tuned to the palette */
|
|
--color-success: #4a7c59;
|
|
--color-success-bg: #e8efe7;
|
|
--color-warn: #b8894a;
|
|
--color-warn-bg: #faf0dc;
|
|
--color-danger: #a54242;
|
|
--color-danger-bg: #f5e6e6;
|
|
--color-info: #4e6a8c;
|
|
--color-info-bg: #e6ecf3;
|
|
|
|
/* ── Typography ─────────────────────────────────────── */
|
|
--font-sans: var(--font-heebo), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-display: var(--font-heebo), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-body: var(--font-heebo), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
|
|
|
|
/* ── Shadows — soft, editorial ──────────────────────── */
|
|
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
|
|
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
--shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
|
|
--shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.05);
|
|
|
|
/* ── Transitions ────────────────────────────────────── */
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
}
|
|
|
|
/* shadcn/ui semantic tokens — wired to CSS vars defined in :root / .dark */
|
|
@theme inline {
|
|
--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-border: var(--border);
|
|
--color-input: var(--input);
|
|
--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);
|
|
--font-heading: var(--font-display);
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
}
|
|
|
|
/*
|
|
* shadcn token values — mapped onto the editorial palette.
|
|
* background/foreground/primary all reference the navy-cream-gold system
|
|
* so shadcn primitives (Button, Card, Badge…) fit the judicial tone
|
|
* without per-component overrides.
|
|
*/
|
|
:root {
|
|
--radius: 0.5rem;
|
|
|
|
--background: var(--color-bg); /* cream */
|
|
--foreground: var(--color-ink); /* near-black */
|
|
--card: var(--color-surface); /* white */
|
|
--card-foreground: var(--color-ink);
|
|
--popover: var(--color-surface);
|
|
--popover-foreground: var(--color-ink);
|
|
--primary: var(--color-navy); /* navy buttons */
|
|
--primary-foreground: var(--color-parchment);
|
|
--secondary: var(--color-cream-deep);
|
|
--secondary-foreground: var(--color-navy);
|
|
--muted: var(--color-rule-soft);
|
|
--muted-foreground: var(--color-ink-muted);
|
|
--accent: var(--color-gold-wash); /* subtle gold backgrounds */
|
|
--accent-foreground: var(--color-gold-deep);
|
|
--destructive: var(--color-danger);
|
|
--border: var(--color-rule);
|
|
--input: var(--color-rule);
|
|
--ring: var(--color-gold); /* gold focus ring */
|
|
|
|
--chart-1: var(--color-navy);
|
|
--chart-2: var(--color-gold);
|
|
--chart-3: var(--color-info);
|
|
--chart-4: var(--color-success);
|
|
--chart-5: var(--color-warn);
|
|
|
|
--sidebar: var(--color-parchment);
|
|
--sidebar-foreground: var(--color-ink);
|
|
--sidebar-primary: var(--color-navy);
|
|
--sidebar-primary-foreground: var(--color-parchment);
|
|
--sidebar-accent: var(--color-gold-wash);
|
|
--sidebar-accent-foreground: var(--color-gold-deep);
|
|
--sidebar-border: var(--color-rule);
|
|
--sidebar-ring: var(--color-gold);
|
|
}
|
|
|
|
/* Dark theme — class-based, toggled on <html> or <body>.
|
|
Inverts navy ↔ parchment and keeps gold as accent. */
|
|
.dark {
|
|
--color-navy: #f5f1e8;
|
|
--color-navy-soft: #e8e0c8;
|
|
--color-navy-dim: #c7bc9a;
|
|
|
|
--color-cream: #0a0f1c;
|
|
--color-cream-deep: #121a2e;
|
|
--color-parchment: #161f36;
|
|
|
|
--color-gold: #d4a55a;
|
|
--color-gold-deep: #e8bc6f;
|
|
--color-gold-soft: #c89a56;
|
|
--color-gold-wash: rgba(212, 165, 90, 0.08);
|
|
|
|
--color-ink: #f5f1e8;
|
|
--color-ink-soft: #d8d2c0;
|
|
--color-ink-muted: #9a9380;
|
|
--color-ink-light: #6a6458;
|
|
|
|
--color-rule: #2a3352;
|
|
--color-rule-soft: #1e2a45;
|
|
|
|
--color-surface: #141b2f;
|
|
--color-surface-raised: #1a2238;
|
|
--color-bg: #0a0f1c;
|
|
|
|
--color-success: #5a9a6a;
|
|
--color-success-bg: rgba(90, 154, 106, 0.12);
|
|
--color-warn: #c79956;
|
|
--color-warn-bg: rgba(199, 153, 86, 0.12);
|
|
--color-danger: #c16565;
|
|
--color-danger-bg: rgba(193, 101, 101, 0.12);
|
|
--color-info: #6d8bab;
|
|
--color-info-bg: rgba(109, 139, 171, 0.12);
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
* Base layer — editorial typography + Hebrew prose defaults
|
|
* ══════════════════════════════════════════════════════════════ */
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-family: var(--font-body);
|
|
font-weight: 400;
|
|
font-size: 0.95rem;
|
|
line-height: 1.65;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-feature-settings: "kern", "liga", "clig", "calt";
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
color: var(--color-navy);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
h1 { font-size: 2.3rem; font-weight: 900; }
|
|
h2 { font-size: 1.8rem; }
|
|
h3 { font-size: 1.45rem; }
|
|
h4 { font-size: 1.2rem; }
|
|
h5 { font-size: 1.05rem; }
|
|
h6 { font-size: 0.95rem; }
|
|
|
|
/* Prose paragraphs — justified for Hebrew legal text */
|
|
p.prose,
|
|
.prose p {
|
|
text-align: justify;
|
|
text-justify: inter-word;
|
|
hyphens: auto;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
/* Selection */
|
|
::selection {
|
|
background: var(--color-gold-wash);
|
|
color: var(--color-navy);
|
|
}
|
|
}
|