Spaces:
Sleeping
Sleeping
| @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap"); | |
| @import "tailwindcss" source(none); | |
| @source "../src"; | |
| @import "tw-animate-css"; | |
| @custom-variant dark (&:is(.dark *)); | |
| /* | |
| * Digital Curator Design System. | |
| * High-end editorial dashboard aesthetic — glass + bento + lavender/navy palette. | |
| */ | |
| @theme inline { | |
| --radius-sm: calc(var(--radius) - 4px); | |
| --radius-md: calc(var(--radius) - 2px); | |
| --radius-lg: var(--radius); | |
| --radius-xl: calc(var(--radius) + 4px); | |
| --radius-2xl: calc(var(--radius) + 8px); | |
| --radius-3xl: calc(var(--radius) + 12px); | |
| --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-ring-offset-background: var(--background); | |
| --color-sidebar: var(--sidebar); | |
| --color-sidebar-foreground: var(--sidebar-foreground); | |
| --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; | |
| --font-mono: "JetBrains Mono", ui-monospace, monospace; | |
| } | |
| :root { | |
| --radius: 1rem; | |
| /* Curator surfaces */ | |
| --background: oklch(0.984 0.008 305); | |
| --foreground: oklch(0.21 0.025 295); | |
| --card: oklch(1 0 0); | |
| --card-foreground: oklch(0.21 0.025 295); | |
| --popover: oklch(1 0 0); | |
| --popover-foreground: oklch(0.21 0.025 295); | |
| /* Curator violet */ | |
| --primary: oklch(0.42 0.135 295); | |
| --primary-foreground: oklch(0.99 0 0); | |
| --primary-glow: oklch(0.55 0.165 295); | |
| --secondary: oklch(0.92 0.045 295); | |
| --secondary-foreground: oklch(0.42 0.135 295); | |
| --muted: oklch(0.96 0.012 305); | |
| --muted-foreground: oklch(0.52 0.025 290); | |
| --accent: oklch(0.78 0.13 85); | |
| --accent-foreground: oklch(0.25 0.05 290); | |
| --destructive: oklch(0.6 0.21 27); | |
| --destructive-foreground: oklch(0.99 0 0); | |
| --success: oklch(0.55 0.14 150); | |
| --warning: oklch(0.78 0.13 85); | |
| --error: oklch(0.6 0.21 27); | |
| --border: oklch(0.92 0.012 295); | |
| --input: oklch(0.94 0.012 295); | |
| --ring: oklch(0.42 0.135 295); | |
| /* Surface system */ | |
| --surface: oklch(0.984 0.008 305); | |
| --surface-container-lowest: oklch(1 0 0); | |
| --surface-container-low: oklch(0.975 0.01 305); | |
| --surface-container: oklch(0.955 0.014 300); | |
| --surface-container-high: oklch(0.935 0.018 300); | |
| --surface-container-highest: oklch(0.91 0.02 295); | |
| --on-surface: oklch(0.21 0.025 295); | |
| --on-surface-variant: oklch(0.34 0.025 290); | |
| --outline: oklch(0.55 0.022 290); | |
| --outline-variant: oklch(0.86 0.014 290); | |
| --sidebar: oklch(1 0 0); | |
| --sidebar-foreground: oklch(0.21 0.025 295); | |
| /* Curator depth */ | |
| --shadow-card: 0 4px 24px color-mix(in oklab, var(--foreground) 6%, transparent); | |
| --shadow-elevated: 0 20px 40px color-mix(in oklab, var(--foreground) 8%, transparent); | |
| --shadow-soft: 0 2px 12px color-mix(in oklab, var(--foreground) 4%, transparent); | |
| --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-glow)); | |
| --gradient-dark: linear-gradient(135deg, oklch(0.18 0.04 290), oklch(0.28 0.06 280)); | |
| } | |
| .dark { | |
| --background: oklch(0.18 0.025 290); | |
| --foreground: oklch(0.95 0.01 295); | |
| --card: oklch(0.23 0.03 290); | |
| --card-foreground: oklch(0.95 0.01 295); | |
| --popover: oklch(0.23 0.03 290); | |
| --popover-foreground: oklch(0.95 0.01 295); | |
| --primary: oklch(0.78 0.12 295); | |
| --primary-foreground: oklch(0.22 0.04 290); | |
| --secondary: oklch(0.32 0.04 285); | |
| --secondary-foreground: oklch(0.95 0.01 295); | |
| --muted: oklch(0.3 0.025 290); | |
| --muted-foreground: oklch(0.72 0.018 290); | |
| --border: oklch(1 0 0 / 12%); | |
| --input: oklch(1 0 0 / 14%); | |
| --ring: oklch(0.78 0.12 295); | |
| } | |
| @layer base { | |
| * { | |
| border-color: var(--color-border); | |
| } | |
| html, body { | |
| background-color: var(--color-background); | |
| color: var(--color-foreground); | |
| font-family: var(--font-sans); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| } | |
| /* Custom range slider — Curator violet */ | |
| input[type="range"].curator-range { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| background: transparent; | |
| width: 100%; | |
| } | |
| input[type="range"].curator-range::-webkit-slider-runnable-track { | |
| height: 6px; | |
| border-radius: 9999px; | |
| background: var(--surface-container-high); | |
| } | |
| input[type="range"].curator-range::-moz-range-track { | |
| height: 6px; | |
| border-radius: 9999px; | |
| background: var(--surface-container-high); | |
| } | |
| input[type="range"].curator-range::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 9999px; | |
| background: var(--primary); | |
| margin-top: -8px; | |
| border: 4px solid var(--card); | |
| box-shadow: 0 2px 8px color-mix(in oklab, var(--primary) 40%, transparent); | |
| cursor: pointer; | |
| } | |
| input[type="range"].curator-range::-moz-range-thumb { | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 9999px; | |
| background: var(--primary); | |
| border: 4px solid var(--card); | |
| box-shadow: 0 2px 8px color-mix(in oklab, var(--primary) 40%, transparent); | |
| cursor: pointer; | |
| } | |