/* ========================================================= Dedoose Next — Theme System 4 themes: Classic (light), Dedoose (teal accent), Dark, High Contrast Applied via data-theme attribute on ========================================================= */ /* ── Classic: Warm neutral light theme ── */ :root, [data-theme="classic"] { --background: oklch(0.985 0.002 90); --foreground: oklch(0.18 0.01 75); --card: oklch(1 0 0); --card-foreground: oklch(0.18 0.01 75); --popover: oklch(1 0 0); --popover-foreground: oklch(0.18 0.01 75); --primary: oklch(0.45 0.12 250); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.955 0.005 90); --secondary-foreground: oklch(0.25 0.01 75); --muted: oklch(0.955 0.005 90); --muted-foreground: oklch(0.52 0.01 75); --accent: oklch(0.94 0.01 250); --accent-foreground: oklch(0.25 0.01 75); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.905 0.005 90); --input: oklch(0.905 0.005 90); --ring: oklch(0.45 0.12 250); --radius: 0.625rem; --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.714); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); } /* ── Dedoose: Teal/blue branded theme ── */ [data-theme="dedoose"] { --background: oklch(0.98 0.005 200); --foreground: oklch(0.17 0.02 230); --card: oklch(1 0.002 200); --card-foreground: oklch(0.17 0.02 230); --popover: oklch(1 0.002 200); --popover-foreground: oklch(0.17 0.02 230); --primary: oklch(0.55 0.17 195); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.94 0.015 200); --secondary-foreground: oklch(0.22 0.02 230); --muted: oklch(0.94 0.015 200); --muted-foreground: oklch(0.50 0.02 200); --accent: oklch(0.92 0.03 195); --accent-foreground: oklch(0.22 0.02 230); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.89 0.02 200); --input: oklch(0.89 0.02 200); --ring: oklch(0.55 0.17 195); --radius: 0.5rem; --chart-1: oklch(0.55 0.17 195); --chart-2: oklch(0.65 0.15 160); --chart-3: oklch(0.45 0.12 250); --chart-4: oklch(0.70 0.18 140); --chart-5: oklch(0.60 0.20 310); } /* ── Dark: Dark mode ── */ [data-theme="dark"], .dark { --background: oklch(0.155 0.01 260); --foreground: oklch(0.93 0 0); --card: oklch(0.2 0.01 260); --card-foreground: oklch(0.93 0 0); --popover: oklch(0.2 0.01 260); --popover-foreground: oklch(0.93 0 0); --primary: oklch(0.6 0.16 250); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.26 0.01 260); --secondary-foreground: oklch(0.93 0 0); --muted: oklch(0.26 0.01 260); --muted-foreground: oklch(0.65 0.01 260); --accent: oklch(0.30 0.02 250); --accent-foreground: oklch(0.93 0 0); --destructive: oklch(0.60 0.22 27); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.28 0.01 260); --input: oklch(0.28 0.01 260); --ring: oklch(0.6 0.16 250); --radius: 0.625rem; --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.16 250); --chart-3: oklch(0.55 0.17 195); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); } /* ── High Contrast: Maximum readability ── */ [data-theme="high-contrast"] { --background: oklch(1 0 0); --foreground: oklch(0 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0 0 0); --primary: oklch(0.15 0 0); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.93 0 0); --secondary-foreground: oklch(0 0 0); --muted: oklch(0.93 0 0); --muted-foreground: oklch(0.3 0 0); --accent: oklch(0.88 0 0); --accent-foreground: oklch(0 0 0); --destructive: oklch(0.50 0.30 27); --destructive-foreground: oklch(1 0 0); --border: oklch(0.55 0 0); --input: oklch(0.55 0 0); --ring: oklch(0 0 0); --radius: 0.375rem; --chart-1: oklch(0 0 0); --chart-2: oklch(0.40 0 0); --chart-3: oklch(0.50 0.30 27); --chart-4: oklch(0.30 0.15 250); --chart-5: oklch(0.35 0.20 150); } /* ── Base styles ── */ * { border-color: var(--border); } body { background-color: var(--background); color: var(--foreground); } /* Interactive component — inspect reveal system */ .show-on-inspect { display: none !important; } .inspecting .show-on-inspect { display: flex !important; } @media (hover: hover) { .interactive:hover .show-on-inspect { display: flex !important; } }