@import "tailwindcss"; @plugin 'tailwindcss-animate'; @custom-variant dark (&:is(.dark *)); /* ───────────────────────────────────────────────────────────── LIGHT THEME ───────────────────────────────────────────────────────────── */ :root { --background: oklch(0.97 0 0); --foreground: oklch(0.15 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0 0); --popover: oklch(1 0 0 / 0.92); --popover-foreground: oklch(0.15 0 0); --primary: oklch(0.15 0 0); --primary-foreground: oklch(1 0 0); --secondary: oklch(0 0 0 / 0.05); --secondary-foreground: oklch(0.15 0 0); --muted: oklch(0 0 0 / 0.04); --muted-foreground: oklch(0.50 0 0); --accent: oklch(0 0 0 / 0.06); --accent-foreground: oklch(0.15 0 0); --destructive: oklch(0.63 0.18 20); --destructive-foreground: oklch(1 0 0); --border: oklch(0 0 0 / 0.10); --input: oklch(0.97 0 0); --ring: oklch(0.50 0.14 200); /* Brand: technical cyan, the signature accent */ --brand: oklch(0.50 0.14 200); --brand-foreground: oklch(1 0 0); --brand-muted: oklch(0.50 0.14 200 / 0.12); /* Glass: frosted surface system */ --glass: oklch(1 0 0); --glass-border: oklch(0 0 0 / 0.10); --glass-highlight: oklch(0 0 0 / 0.06); /* Semantic status colors */ --success: oklch(0.65 0.16 155); --success-foreground: oklch(1 0 0); --success-muted: oklch(0.65 0.16 155 / 0.12); --warning: oklch(0.75 0.14 75); --warning-foreground: oklch(0.20 0 0); --warning-muted: oklch(0.75 0.14 75 / 0.12); /* --info: TOAST USE ONLY. Not part of the §17 five-slot working palette. New components must consume --brand, --success, --warning, --destructive, or surface/ink tokens instead. */ --info: oklch(0.62 0.14 250); --info-foreground: oklch(1 0 0); --info-muted: oklch(0.62 0.14 250 / 0.12); --update: oklch(0.62 0.22 320); --update-foreground: oklch(1 0 0); --update-muted: oklch(0.62 0.22 320 / 0.12); --destructive-muted: oklch(0.63 0.18 20 / 0.12); /* Charts: cyan leads as the primary data color, amber for peaks, rose for errors */ --chart-1: var(--brand); --chart-2: var(--warning); --chart-3: var(--destructive); --chart-4: oklch(0.70 0 0); --chart-5: oklch(0.45 0 0); /* Sparkline / data-line styling (centralized) */ --data-line-width: 1.25px; --data-peak: var(--warning); /* Sidebar */ --sidebar: oklch(0.98 0 0 / 0.80); --sidebar-foreground: oklch(0.15 0 0); --sidebar-primary: oklch(0.15 0 0); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0 0 0 / 0.06); --sidebar-accent-foreground: oklch(0.15 0 0); --sidebar-border: oklch(0 0 0 / 0.10); --sidebar-ring: oklch(0.50 0.14 200); /* Stat hierarchy: text brightness tiers */ --stat-value: oklch(0.15 0 0); --stat-title: oklch(0.40 0 0); --stat-subtitle: oklch(0.50 0 0); --stat-icon: oklch(0.60 0 0); /* Card borders: directional lighting */ --card-border: oklch(0 0 0 / 0.08); --card-border-top: oklch(0 0 0 / 0.12); --card-border-hover: oklch(0 0 0 / 0.15); /* Label palette: ten raw hues preserved for existing assignments */ --label-teal: oklch(0.55 0.12 192); --label-teal-bg: oklch(0.55 0.12 192 / 0.12); --label-blue: oklch(0.55 0.14 250); --label-blue-bg: oklch(0.55 0.14 250 / 0.12); --label-purple: oklch(0.55 0.14 300); --label-purple-bg: oklch(0.55 0.14 300 / 0.12); --label-rose: oklch(0.55 0.16 10); --label-rose-bg: oklch(0.55 0.16 10 / 0.12); --label-amber: oklch(0.60 0.16 60); --label-amber-bg: oklch(0.60 0.16 60 / 0.12); --label-green: oklch(0.55 0.15 150); --label-green-bg: oklch(0.55 0.15 150 / 0.12); --label-orange: oklch(0.58 0.16 45); --label-orange-bg: oklch(0.58 0.16 45 / 0.12); --label-pink: oklch(0.58 0.16 340); --label-pink-bg: oklch(0.58 0.16 340 / 0.12); --label-cyan: oklch(0.58 0.12 210); --label-cyan-bg: oklch(0.58 0.12 210 / 0.12); --label-slate: oklch(0.50 0.01 250); --label-slate-bg: oklch(0.50 0.01 250 / 0.12); /* Semantic label roles: new labels should consume these */ --label-env: var(--label-teal); --label-env-bg: var(--label-teal-bg); --label-role: var(--label-blue); --label-role-bg: var(--label-blue-bg); --label-owner: var(--label-green); --label-owner-bg: var(--label-green-bg); --label-risk: var(--label-rose); --label-risk-bg: var(--label-rose-bg); --label-custom: var(--label-amber); --label-custom-bg: var(--label-amber-bg); /* Chart grid & axis */ --chart-grid: oklch(0 0 0 / 0.06); --chart-tick: oklch(0 0 0 / 0.45); /* Typography */ --font-sans: 'Geist', sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; --font-display: 'Instrument Serif', Georgia, serif; --font-mono: 'Geist Mono', monospace; /* Shape */ --radius: 0.5rem; /* Shadows: subtle, glass depth comes from blur not shadow */ --shadow-x: 0px; --shadow-y: 1px; --shadow-blur: 2px; --shadow-spread: 0px; --shadow-opacity: 0.10; --shadow-color: hsl(0 0% 0%); --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.05); --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.05); --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.08); --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.08), 0px 1px 2px -1px hsl(0 0% 0% / 0.08); --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10); --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10); --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10); --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.25); /* Material simulation: inherent depth */ --card-bevel: inset 0 1px 0 0 oklch(1 0 0 / 0.04), 0 1px 2px 0 oklch(0 0 0 / 0.05); --button-inner-glow: inset 0 1px 0 0 oklch(1 0 0 / 0.04); --chrome-top-highlight: inset 0 1px 0 0 oklch(1 0 0 / 0.45); /* Motion timing */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 350ms; --tracking-normal: 0em; --spacing: 0.25rem; /* Density: comfortable defaults. Overridden under .density-compact. */ --density-scale: 1; /* proportional scale for fixed dimensions */ --density-row-y: 0.75rem; /* py-3 */ --density-row-x: 1.25rem; /* px-5 */ --density-cell-y: 0.5rem; /* py-2 */ --density-tile-y: 1rem; /* py-4 */ --density-gap: 1rem; /* gap-4 */ /* Terminal (dark well even in light theme) */ --terminal-bg: oklch(0.12 0 0); --terminal-fg: oklch(0.85 0 0); --terminal-cursor: oklch(1 0 0); --terminal-cursor-accent: oklch(0 0 0); --terminal-selection: oklch(1 0 0 / 0.3); } /* ───────────────────────────────────────────────────────────── DARK THEME ───────────────────────────────────────────────────────────── */ .dark { --background: oklch(0.08 0 0); --foreground: oklch(0.94 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.94 0 0); --popover: oklch(0.14 0 0 / 0.82); --popover-foreground: oklch(0.94 0 0); --primary: oklch(0.98 0 0); --primary-foreground: oklch(0.10 0 0); --secondary: oklch(0.12 0 0); --secondary-foreground: oklch(0.94 0 0); --muted: oklch(0.12 0 0); --muted-foreground: oklch(0.45 0 0); --accent: oklch(1 0 0 / 0.06); --accent-foreground: oklch(0.94 0 0); --destructive: oklch(0.72 0.18 20); --destructive-foreground: oklch(0.94 0 0); --border: oklch(1 0 0 / 0.06); --input: oklch(0.12 0 0); --ring: oklch(0.78 0.11 195); /* Brand: desaturated teal accent */ --brand: oklch(0.78 0.11 195); --brand-foreground: oklch(0.05 0 0); --brand-muted: oklch(0.78 0.11 195 / 0.12); /* Glass: solid surface system (no blur on static surfaces) */ --glass: oklch(0.12 0 0); --glass-border: oklch(1 0 0 / 0.06); --glass-highlight: oklch(1 0 0 / 0.06); /* Semantic status colors */ --success: oklch(0.78 0.16 155); --success-foreground: oklch(0.10 0 0); --success-muted: oklch(0.78 0.16 155 / 0.15); --warning: oklch(0.82 0.14 75); --warning-foreground: oklch(0.10 0 0); --warning-muted: oklch(0.82 0.14 75 / 0.15); /* --info: TOAST USE ONLY. Not part of the §17 five-slot working palette. */ --info: oklch(0.70 0.14 250); --info-foreground: oklch(0.10 0 0); --info-muted: oklch(0.70 0.14 250 / 0.15); --update: oklch(0.72 0.20 320); --update-foreground: oklch(0.10 0 0); --update-muted: oklch(0.72 0.20 320 / 0.15); --destructive-muted: oklch(0.72 0.18 20 / 0.15); /* Charts: cyan leads as the primary data color, amber for peaks, rose for errors */ --chart-1: var(--brand); --chart-2: var(--warning); --chart-3: var(--destructive); --chart-4: oklch(0.55 0 0); --chart-5: oklch(0.80 0 0); /* Sparkline / data-line styling (centralized) */ --data-line-width: 1.25px; --data-peak: var(--warning); /* Sidebar */ --sidebar: oklch(0.08 0 0 / 0.80); --sidebar-foreground: oklch(0.94 0 0); --sidebar-primary: oklch(0.98 0 0); --sidebar-primary-foreground: oklch(0.10 0 0); --sidebar-accent: oklch(1 0 0 / 0.07); --sidebar-accent-foreground: oklch(0.94 0 0); --sidebar-border: oklch(1 0 0 / 0.06); --sidebar-ring: oklch(0.78 0.11 195); /* Stat hierarchy: text brightness tiers */ --stat-value: oklch(0.93 0 0); --stat-title: oklch(0.55 0 0); --stat-subtitle: oklch(0.45 0 0); --stat-icon: oklch(0.35 0 0); /* Card borders: directional lighting */ --card-border: oklch(1 0 0 / 0.07); --card-border-top: oklch(1 0 0 / 0.14); --card-border-hover: oklch(1 0 0 / 0.14); /* Label palette: ten raw hues preserved for existing assignments */ --label-teal: oklch(0.75 0.10 192); --label-teal-bg: oklch(0.75 0.10 192 / 0.15); --label-blue: oklch(0.72 0.12 250); --label-blue-bg: oklch(0.72 0.12 250 / 0.15); --label-purple: oklch(0.72 0.12 300); --label-purple-bg: oklch(0.72 0.12 300 / 0.15); --label-rose: oklch(0.72 0.14 10); --label-rose-bg: oklch(0.72 0.14 10 / 0.15); --label-amber: oklch(0.78 0.14 60); --label-amber-bg: oklch(0.78 0.14 60 / 0.15); --label-green: oklch(0.72 0.13 150); --label-green-bg: oklch(0.72 0.13 150 / 0.15); --label-orange: oklch(0.75 0.14 45); --label-orange-bg: oklch(0.75 0.14 45 / 0.15); --label-pink: oklch(0.75 0.14 340); --label-pink-bg: oklch(0.75 0.14 340 / 0.15); --label-cyan: oklch(0.75 0.10 210); --label-cyan-bg: oklch(0.75 0.10 210 / 0.15); --label-slate: oklch(0.65 0.01 250); --label-slate-bg: oklch(0.65 0.01 250 / 0.15); /* Semantic label roles: new labels should consume these */ --label-env: var(--label-teal); --label-env-bg: var(--label-teal-bg); --label-role: var(--label-blue); --label-role-bg: var(--label-blue-bg); --label-owner: var(--label-green); --label-owner-bg: var(--label-green-bg); --label-risk: var(--label-rose); --label-risk-bg: var(--label-rose-bg); --label-custom: var(--label-amber); --label-custom-bg: var(--label-amber-bg); /* Chart grid & axis */ --chart-grid: oklch(1 0 0 / 0.05); --chart-tick: oklch(1 0 0 / 0.40); /* Typography */ --font-sans: 'Geist', sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; --font-display: 'Instrument Serif', Georgia, serif; --font-mono: 'Geist Mono', monospace; /* Shape */ --radius: 0.5rem; /* Material simulation: inherent depth */ --card-bevel: inset 0 1px 0 0 oklch(1 0 0 / 0.05); --button-inner-glow: inset 0 1px 0 0 oklch(1 0 0 / 0.06); --chrome-top-highlight: inset 0 1px 0 0 oklch(1 0 0 / 0.08); /* Shadows: near-zero, depth comes from surface tone */ --shadow-x: 0px; --shadow-y: 1px; --shadow-blur: 2px; --shadow-spread: 0px; --shadow-opacity: 0.15; --shadow-color: hsl(0 0% 0%); --shadow-2xs: 0 0 0 0 transparent; --shadow-xs: 0 0 0 0 transparent; --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.15); --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.15); --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.15); --shadow-lg: 0px 4px 6px -1px hsl(0 0% 0% / 0.15); --shadow-xl: 0px 8px 10px -1px hsl(0 0% 0% / 0.20); --shadow-2xl: 0px 12px 20px -2px hsl(0 0% 0% / 0.30); /* Terminal (recessed well, matches page background) --terminal-fg/cursor/selection: inherited from :root (both themes use a dark terminal) */ --terminal-bg: oklch(0.08 0 0); } /* ───────────────────────────────────────────────────────────── TAILWIND THEME MAPPING ───────────────────────────────────────────────────────────── */ @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-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-brand: var(--brand); --color-brand-foreground: var(--brand-foreground); --color-brand-muted: var(--brand-muted); --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-glass: var(--glass); --color-glass-border: var(--glass-border); --color-glass-highlight: var(--glass-highlight); --color-stat-value: var(--stat-value); --color-stat-title: var(--stat-title); --color-stat-subtitle: var(--stat-subtitle); --color-stat-icon: var(--stat-icon); --color-card-border: var(--card-border); --color-card-border-top: var(--card-border-top); --color-card-border-hover: var(--card-border-hover); --color-chart-grid: var(--chart-grid); --color-chart-tick: var(--chart-tick); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-success-muted: var(--success-muted); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-warning-muted: var(--warning-muted); --color-info: var(--info); --color-info-foreground: var(--info-foreground); --color-info-muted: var(--info-muted); --color-update: var(--update); --color-update-foreground: var(--update-foreground); --color-update-muted: var(--update-muted); --color-destructive-muted: var(--destructive-muted); --font-sans: var(--font-sans); --font-mono: var(--font-mono); --font-serif: var(--font-serif); --font-display: var(--font-display); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --shadow-2xs: var(--shadow-2xs); --shadow-xs: var(--shadow-xs); --shadow-sm: var(--shadow-sm); --shadow: var(--shadow); --shadow-md: var(--shadow-md); --shadow-lg: var(--shadow-lg); --shadow-xl: var(--shadow-xl); --shadow-2xl: var(--shadow-2xl); --shadow-card-bevel: var(--card-bevel); --shadow-btn-glow: var(--button-inner-glow); --shadow-chrome-top: var(--chrome-top-highlight); } /* ───────────────────────────────────────────────────────────── BASE STYLES ───────────────────────────────────────────────────────────── */ @layer base { :root { color-scheme: dark; } * { @apply border-border outline-ring/50; } body { @apply text-foreground; background: radial-gradient( circle at 50% 0%, oklch(0.95 0.02 60 / 0.3), transparent ), var(--background); } } /* Density: compact mode compresses row/cell padding by ~50%. */ body.density-compact { --density-scale: 0.75; --density-row-y: 0.375rem; --density-row-x: 1rem; --density-cell-y: 0.25rem; --density-tile-y: 0.625rem; --density-gap: 0.75rem; } /* Dark mode: teal-tinted ambient glow */ .dark body { background: radial-gradient( circle at 50% 0%, oklch(0.25 0.05 250 / 0.15), transparent ), var(--background); } /* ───────────────────────────────────────────────────────────── TYPOGRAPHY & RENDERING ───────────────────────────────────────────────────────────── */ html, body, #root { height: 100%; width: 100%; overflow: hidden; } body { font-family: var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.5; font-weight: 400; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ───────────────────────────────────────────────────────────── SCROLLBAR ───────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: oklch(0.40 0 0 / 0.5); border-radius: 4px; transition: background var(--duration-fast) ease; } ::-webkit-scrollbar-thumb:hover { background: oklch(0.55 0 0 / 0.7); } .dark ::-webkit-scrollbar-thumb { background: oklch(0.35 0 0 / 0.6); } .dark ::-webkit-scrollbar-thumb:hover { background: oklch(0.50 0 0 / 0.8); } /* ───────────────────────────────────────────────────────────── GLASS UTILITIES ───────────────────────────────────────────────────────────── */ .glass { background: var(--glass); border: 1px solid var(--glass-border); } .glass-strong { background: var(--glass); border: 1px solid var(--glass-border); } .glass-float { background: var(--popover); backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15); border: 1px solid var(--glass-border); } /* ───────────────────────────────────────────────────────────── ANIMATION KEYFRAMES ───────────────────────────────────────────────────────────── */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-in-left { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } @keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes shimmer { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } } /* ───────────────────────────────────────────────────────────── ANIMATION UTILITIES ───────────────────────────────────────────────────────────── */ .animate-fade-in { animation: fade-in var(--duration-base) var(--ease-out-expo) both; } .animate-fade-up { animation: fade-up var(--duration-base) var(--ease-out-expo) both; } .animate-fade-down { animation: fade-down var(--duration-base) var(--ease-out-expo) both; } .animate-slide-in-left { animation: slide-in-left var(--duration-base) var(--ease-out-expo) both; } .animate-scale-in { animation: scale-in var(--duration-fast) var(--ease-spring) both; } .animate-shimmer { animation: shimmer 4.5s ease-in-out infinite alternate; } /* Stagger delay helpers */ .animate-delay-50 { animation-delay: 50ms; } .animate-delay-100 { animation-delay: 100ms; } .animate-delay-150 { animation-delay: 150ms; } .animate-delay-200 { animation-delay: 200ms; } .animate-delay-300 { animation-delay: 300ms; } /* ───────────────────────────────────────────────────────────── PREFERS REDUCED MOTION - zero-cost accessibility ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ───────────────────────────────────────────────────────────── XTERM.JS ───────────────────────────────────────────────────────────── */ .xterm { padding: 0; }