/* Hezivio Design System Tokens v1 * Shared across all Hezivio apps via CDN. * Change here → all apps update instantly, zero redeploy. * Hosted: media.hezivio.com */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); :root { /* Background Surfaces — layered dark */ --hz-background: #111114; --hz-foreground: #ececef; --hz-card: #1c1c21; --hz-card-foreground: #ececef; --hz-popover: #1c1c21; --hz-popover-foreground: #ececef; --hz-panel: #161619; --hz-surface: #1c1c21; --hz-hover-surface: #2a2a30; /* Brand — Hezivio Teal */ --hz-primary: #14b8a6; --hz-primary-foreground: #ffffff; --hz-accent: #2dd4bf; --hz-accent-foreground: #111114; /* Secondary */ --hz-secondary: #252529; --hz-secondary-foreground: #d1d1d6; /* Muted */ --hz-muted: #1e1e23; --hz-muted-foreground: #8e8e9a; /* Destructive */ --hz-destructive: #ef4444; --hz-destructive-foreground: #ffffff; /* Borders & Input */ --hz-border: #2e2e35; --hz-border-visible: #3d3d47; --hz-border-subtle: #232328; --hz-input: #353540; --hz-ring: #14b8a6; /* Text Hierarchy */ --hz-text-primary: #ececef; --hz-text-secondary: #b0b0ba; --hz-text-muted: #8e8e9a; --hz-text-subtle: #65656f; /* Status */ --hz-success: #22c55e; --hz-warning: #f59e0b; --hz-error: #ef4444; --hz-info: #3b82f6; /* Teal Variants */ --hz-teal-interactive: #2dd4bf; --hz-teal-hover: #5eead4; --hz-teal-muted: rgba(20, 184, 166, 0.12); /* Radius */ --hz-radius: 0.5rem; --hz-radius-sm: 0.375rem; --hz-radius-md: 0.5rem; --hz-radius-lg: 0.75rem; --hz-radius-xl: 1rem; --hz-radius-pill: 9999px; /* Typography */ --hz-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --hz-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; } /* Light theme — opt-in per app via . Apps that stay dark simply never set the class. Owning both themes here means a palette tweak propagates to every app, in both modes, with zero redeploy. */ html.light { color-scheme: light; --hz-background: #f6f7fb; --hz-foreground: #111827; --hz-card: #ffffff; --hz-card-foreground: #111827; --hz-popover: #ffffff; --hz-popover-foreground: #111827; --hz-panel: #eef2f7; --hz-surface: #ffffff; --hz-hover-surface: #edf2f7; --hz-primary: #0f766e; --hz-primary-foreground: #ffffff; --hz-secondary: #e7ecf3; --hz-secondary-foreground: #334155; --hz-muted: #eef2f7; --hz-muted-foreground: #64748b; --hz-accent: #14b8a6; --hz-accent-foreground: #082f2b; --hz-destructive: #dc2626; --hz-destructive-foreground: #ffffff; --hz-border: #d8e0ea; --hz-input: #d8e0ea; --hz-ring: #0f766e; --hz-border-visible: #c5d0de; --hz-border-subtle: #e6ebf2; --hz-text-primary: #0f172a; --hz-text-secondary: #334155; --hz-text-muted: #64748b; --hz-text-subtle: #94a3b8; --hz-success: #16a34a; --hz-warning: #d97706; --hz-error: #dc2626; --hz-info: #2563eb; --hz-teal-interactive: #0f766e; --hz-teal-hover: #0d9488; --hz-teal-muted: rgba(15, 118, 110, 0.12); } /* Dark-mode baseline — without this, mobile browsers (esp. iOS Safari) render native controls, scrollbars and the default page background in light, which is why "dark mode" looked broken on phones. color-scheme + an explicit html/body background make every Hezivio app dark by default, everywhere. */ :root { color-scheme: dark; } html, body { background-color: var(--hz-background); color: var(--hz-text-primary); }