/** * Handfish Theme: Corporate * * Clean, professional light theme with cool gray neutrals and * polished blue-teal accents. Solid surfaces with minimal blur * give a buttoned-up, enterprise-app feel. Apply with: * * * * Or import after the base stylesheet to override defaults. */ [data-theme="corporate"] { /* Neutrals — cool grays, very low chroma (hue 240°) */ --hf-color-1: oklch(97.0% 0.003 240); --hf-color-2: oklch(93.5% 0.005 240); --hf-color-3: oklch(88.0% 0.008 240); --hf-color-4: oklch(75.0% 0.010 240); --hf-color-5: oklch(55.0% 0.012 240); --hf-color-6: oklch(35.0% 0.010 240); --hf-color-7: oklch(15.0% 0.008 240); /* Accents — professional blue-teal, moderate chroma */ --hf-accent-1: oklch(93.0% 0.025 220); --hf-accent-2: oklch(85.0% 0.050 220); --hf-accent-3: oklch(50.0% 0.120 220); --hf-accent-4: oklch(35.0% 0.100 220); /* Semantic colors — muted professional tones */ --hf-red: oklch(55.0% 0.180 18); --hf-green: oklch(55.0% 0.140 168); --hf-yellow: oklch(70.0% 0.140 80); --hf-blue: oklch(52.0% 0.140 245); /* Typography — clean sans-serif */ --hf-font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* Medium radii — polished but not rounded */ --hf-radius-sm: 4px; --hf-radius-md: 6px; --hf-radius: 6px; --hf-radius-lg: 8px; --hf-radius-xl: 12px; --hf-radius-pill: 999px; /* Clean subtle shadows — no color tint, low opacity */ --hf-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.06); --hf-shadow: 0 1px 4px oklch(0% 0 0 / 0.08); --hf-shadow-md: 0 2px 8px oklch(0% 0 0 / 0.10); --hf-shadow-lg: 0 4px 16px oklch(0% 0 0 / 0.12); --hf-shadow-xl: 0 8px 32px oklch(0% 0 0 / 0.14); --hf-glow-accent: 0 0 12px oklch(50% 0.120 220 / 0.15); /* Glassmorphism — high opacity, minimal blur (solid feel) */ --hf-surface-opacity: 97%; --hf-surface-transparency: 3%; --hf-panel-opacity: 95%; --hf-panel-transparency: 5%; --hf-header-opacity: 92%; --hf-header-transparency: 8%; --hf-glass-blur: blur(8px); --hf-glass-blur-sm: blur(4px); --hf-glass-blur-lg: blur(12px); --hf-backdrop: oklch(0% 0 0 / 0.35); /* Computed borders — subtle, neutral */ --hf-border: color-mix(in srgb, var(--hf-color-4) 40%, transparent 60%); --hf-border-hover: color-mix(in srgb, var(--hf-accent-3) 40%, transparent 60%); --hf-border-focus: var(--hf-accent-3); }