/** * Handfish Theme: Sunset * * Dark indigo sky with pink and orange accents, evoking the * gradient of a setting sun. Warm-tinted shadows and moderate * glass give a rich, atmospheric feel. Apply with: * * * * Or import after the base stylesheet to override defaults. */ @font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('https://fonts.noisefactor.io/fonts/quicksand/Quicksand[wght].woff2') format('woff2'); } [data-theme="sunset"] { /* Neutrals — dark indigo sky (hue 270°), visible blue tint */ --hf-color-1: oklch(12.0% 0.025 270); --hf-color-2: oklch(18.0% 0.032 270); --hf-color-3: oklch(25.0% 0.038 270); --hf-color-4: oklch(34.0% 0.040 270); --hf-color-5: oklch(55.0% 0.035 270); --hf-color-6: oklch(76.0% 0.025 270); --hf-color-7: oklch(93.0% 0.012 270); /* Accents — warm pink primary (hue ~350°), orange secondary (hue ~35°) */ --hf-accent-1: oklch(22.0% 0.045 350); --hf-accent-2: oklch(35.0% 0.080 350); --hf-accent-3: oklch(72.0% 0.140 350); --hf-accent-4: oklch(78.0% 0.150 35); /* Semantic colors — warm-tinted variations */ --hf-red: oklch(65.0% 0.200 20); --hf-green: oklch(75.0% 0.180 150); --hf-yellow: oklch(87.0% 0.140 85); --hf-blue: oklch(60.0% 0.140 255); /* Typography — clean variable sans-serif */ --hf-font-family: 'Quicksand'; /* Slightly rounded radii */ --hf-radius-sm: 6px; --hf-radius-md: 8px; --hf-radius: 8px; --hf-radius-lg: 10px; --hf-radius-xl: 14px; --hf-radius-pill: 999px; /* Warm sunset-tinted shadows — pink/indigo glow */ --hf-shadow-sm: 0 1px 3px oklch(10% 0.020 270 / 0.30); --hf-shadow: 0 2px 6px oklch(8% 0.018 270 / 0.35); --hf-shadow-md: 0 4px 12px oklch(8% 0.018 270 / 0.35), 0 0 6px oklch(72% 0.140 350 / 0.08); --hf-shadow-lg: 0 8px 24px oklch(6% 0.015 270 / 0.40), 0 0 12px oklch(72% 0.140 350 / 0.10); --hf-shadow-xl: 0 16px 48px oklch(5% 0.012 270 / 0.45), 0 0 24px oklch(72% 0.140 350 / 0.12); --hf-glow-accent: 0 0 16px oklch(72% 0.140 350 / 0.35); /* Glassmorphism — moderate opacity */ --hf-surface-opacity: 88%; --hf-surface-transparency: 12%; --hf-panel-opacity: 82%; --hf-panel-transparency: 18%; --hf-header-opacity: 65%; --hf-header-transparency: 35%; --hf-glass-blur: blur(20px); --hf-glass-blur-sm: blur(8px); --hf-glass-blur-lg: blur(32px); --hf-backdrop: oklch(8% 0.012 270 / 0.70); /* Computed borders — 25%/40% accent mix (default) */ --hf-border: color-mix(in srgb, var(--hf-accent-3) 25%, transparent 75%); --hf-border-hover: color-mix(in srgb, var(--hf-accent-3) 40%, transparent 60%); --hf-border-focus: var(--hf-accent-3); }