/* ================================================================ CALYX — CLINICAL THEME SYSTEM 10 themes, each overriding the --clinic-* and Shadcn tokens. Usage: apply data-theme="theme-name" to or a wrapper. Example: Themes: 01 parchment-rose (default, defined in globals.css) 02 arctic-slate 03 sage-forest 04 obsidian-gold 05 lavender-mist 06 copper-bone 07 midnight-teal 08 linen-charcoal 09 mocha-rose 10 pearl-noir ================================================================ */ /* ================================================================ 02 · ARCTIC SLATE Ice-blue neutrals · cobalt primary · clinical precision POLAR MIST ramp (neutral spine) 50 #F5F8FB 100 #E0EAF4 200 #C8D9E8 400 #A8BFD0 600 #6A90AA 800 #2E5878 900 #1A3252 COBALT ramp (primary action) 50 #EAF2FA 100 #D8E8F5 200 #B8D4EE 400 #3A7BD5 600 #2260B0 800 #154088 900 #0A2860 STEEL ramp (grey — cool) 50 #F0F4F8 100 #E0E8F0 200 #C0CDD8 400 #8898A8 600 #506070 800 #303C48 900 #1A2332 ================================================================ */ [data-theme="arctic-slate"][data-theme="arctic-slate"] { --polar-50: #F5F8FB; --polar-100: #E0EAF4; --polar-200: #C8D9E8; --polar-400: #A8BFD0; --polar-600: #6A90AA; --polar-800: #2E5878; --polar-900: #1A3252; --cobalt-50: #EAF2FA; --cobalt-100: #D8E8F5; --cobalt-200: #B8D4EE; --cobalt-400: #3A7BD5; --cobalt-600: #2260B0; --cobalt-800: #154088; --cobalt-900: #0A2860; --steel-50: #F0F4F8; --steel-100: #E0E8F0; --steel-200: #C0CDD8; --steel-400: #8898A8; --steel-600: #506070; --steel-800: #303C48; --steel-900: #1A2332; --background: var(--polar-50); --foreground: var(--steel-900); --card: var(--cobalt-50); --card-foreground: var(--steel-900); --popover: var(--cobalt-50); --popover-foreground: var(--steel-900); --primary: var(--cobalt-400); --primary-foreground: #FFFFFF; --secondary: var(--cobalt-100); --secondary-foreground: var(--cobalt-800); --muted: var(--steel-100); --muted-foreground: var(--steel-600); --accent: var(--steel-50); --accent-foreground: var(--steel-900); --destructive: #C0392B; --destructive-foreground: #FFFFFF; --border: var(--polar-200); --input: var(--steel-100); --ring: var(--cobalt-400); --sidebar: var(--polar-50); --sidebar-foreground: var(--steel-900); --sidebar-primary: var(--cobalt-400); --sidebar-primary-foreground: #FFFFFF; --sidebar-accent: var(--cobalt-100); --sidebar-accent-foreground: var(--cobalt-800); --sidebar-border: var(--polar-200); --sidebar-ring: var(--cobalt-400); --clinic-bg: var(--polar-50); --clinic-sidebar: var(--polar-50); --clinic-sidebar-border: var(--polar-200); --clinic-sidebar-fg: var(--steel-900); --clinic-sidebar-muted: var(--steel-600); --clinic-nav-active-bg: var(--cobalt-100); --clinic-nav-active-fg: var(--cobalt-800); --clinic-nav-hover-bg: var(--steel-50); --clinic-nav-hover-fg: var(--steel-900); --clinic-nav-fg: var(--steel-600); --clinic-avatar-bg: var(--polar-100); --clinic-avatar-border: var(--polar-200); --clinic-divider: var(--polar-200); --clinic-overlay: rgba(26, 50, 82, 0.4); --status-today-bg: var(--cobalt-100); --status-today-text: var(--cobalt-800); --status-today-border: var(--cobalt-200); --status-scheduled-bg: var(--polar-100); --status-scheduled-text: var(--polar-800); --status-scheduled-border: var(--polar-200); --status-pending-bg: var(--steel-100); --status-pending-text: var(--steel-800); --status-pending-border: var(--steel-200); --status-followup-bg: var(--cobalt-50); --status-followup-text: var(--cobalt-600); --status-followup-border: var(--cobalt-100); --status-active-bg: var(--polar-50); --status-active-text: var(--polar-600); --status-active-border: var(--polar-200); --status-completed-bg: var(--steel-50); --status-completed-text: var(--steel-600); --status-completed-border: var(--steel-200); --status-cancelled-bg: #FDF0EF; --status-cancelled-text: #8A2020; --status-cancelled-border: #F0C4BF; --color-chart-1: var(--cobalt-400); --color-chart-2: var(--polar-400); --color-chart-3: var(--steel-400); --color-chart-4: var(--cobalt-200); --color-chart-5: var(--steel-200); } /* ================================================================ 03 · SAGE FOREST Botanical green neutrals · emerald primary · organic, restorative MIST ramp (neutral spine — cool green-white) 50 #F4F8F5 100 #E0EEE4 200 #C2D8C8 400 #9ABAA0 600 #5E8A68 800 #2A5038 900 #182E20 EMERALD ramp (primary action) 50 #E8F2EA 100 #C8E0CC 200 #A0C8A8 400 #2E8050 600 #1E6038 800 #0E4028 900 #062818 STONE ramp (grey — warm green) 50 #F2F6F2 100 #E0E8E0 200 #C0D0C0 400 #80988A 600 #4A6858 800 #284038 900 #182818 ================================================================ */ [data-theme="sage-forest"][data-theme="sage-forest"] { --mist-50: #F4F8F5; --mist-100: #E0EEE4; --mist-200: #C2D8C8; --mist-400: #9ABAA0; --mist-600: #5E8A68; --mist-800: #2A5038; --mist-900: #182E20; --emerald-50: #E8F2EA; --emerald-100: #C8E0CC; --emerald-200: #A0C8A8; --emerald-400: #2E8050; --emerald-600: #1E6038; --emerald-800: #0E4028; --emerald-900: #062818; --stone-50: #F2F6F2; --stone-100: #E0E8E0; --stone-200: #C0D0C0; --stone-400: #80988A; --stone-600: #4A6858; --stone-800: #284038; --stone-900: #182818; --background: var(--mist-50); --foreground: var(--stone-900); --card: var(--emerald-50); --card-foreground: var(--stone-900); --popover: var(--emerald-50); --popover-foreground: var(--stone-900); --primary: var(--emerald-400); --primary-foreground: #FFFFFF; --secondary: var(--emerald-100); --secondary-foreground: var(--emerald-800); --muted: var(--stone-100); --muted-foreground: var(--stone-600); --accent: var(--stone-50); --accent-foreground: var(--stone-900); --destructive: #C0392B; --destructive-foreground: #FFFFFF; --border: var(--mist-200); --input: var(--stone-100); --ring: var(--emerald-400); --sidebar: var(--mist-50); --sidebar-foreground: var(--stone-900); --sidebar-primary: var(--emerald-400); --sidebar-primary-foreground: #FFFFFF; --sidebar-accent: var(--emerald-100); --sidebar-accent-foreground: var(--emerald-800); --sidebar-border: var(--mist-200); --sidebar-ring: var(--emerald-400); --clinic-bg: var(--mist-50); --clinic-sidebar: var(--mist-50); --clinic-sidebar-border: var(--mist-200); --clinic-sidebar-fg: var(--stone-900); --clinic-sidebar-muted: var(--stone-600); --clinic-nav-active-bg: var(--emerald-100); --clinic-nav-active-fg: var(--emerald-800); --clinic-nav-hover-bg: var(--stone-50); --clinic-nav-hover-fg: var(--stone-900); --clinic-nav-fg: var(--stone-600); --clinic-avatar-bg: var(--mist-100); --clinic-avatar-border: var(--mist-200); --clinic-divider: var(--mist-200); --clinic-overlay: rgba(24, 46, 32, 0.4); --status-today-bg: var(--emerald-100); --status-today-text: var(--emerald-800); --status-today-border: var(--emerald-200); --status-scheduled-bg: var(--mist-100); --status-scheduled-text: var(--mist-800); --status-scheduled-border: var(--mist-200); --status-pending-bg: var(--stone-100); --status-pending-text: var(--stone-800); --status-pending-border: var(--stone-200); --status-followup-bg: var(--emerald-50); --status-followup-text: var(--emerald-600); --status-followup-border: var(--emerald-100); --status-active-bg: var(--mist-50); --status-active-text: var(--mist-600); --status-active-border: var(--mist-200); --status-completed-bg: var(--stone-50); --status-completed-text: var(--stone-600); --status-completed-border: var(--stone-200); --status-cancelled-bg: #FDF0EF; --status-cancelled-text: #8A2020; --status-cancelled-border: #F0C4BF; --color-chart-1: var(--emerald-400); --color-chart-2: var(--mist-400); --color-chart-3: var(--stone-400); --color-chart-4: var(--emerald-200); --color-chart-5: var(--stone-200); } /* ================================================================ 04 · OBSIDIAN GOLD Dark obsidian sidebar · warm ivory canvas · gold primary Split-personality: dark chrome, light content area OBSIDIAN ramp (sidebar — dark) 50 #1C1A12 100 #242010 200 #2E2A18 400 #3E3820 600 #5A5030 800 #7A6E48 900 #9A8A60 IVORY ramp (canvas — warm light) 50 #F8F4E8 100 #F0E8CC 200 #DDD0A0 400 #C8B878 600 #A89848 800 #7A7030 900 #4A4218 GOLD ramp (primary action) 50 #FDF4D8 100 #F8E8A8 200 #F0D068 400 #B8902A 600 #8A6818 800 #5A4010 900 #382808 ================================================================ */ [data-theme="obsidian-gold"][data-theme="obsidian-gold"] { --obsidian-50: #1C1A12; --obsidian-100: #242010; --obsidian-200: #2E2A18; --obsidian-400: #3E3820; --obsidian-600: #5A5030; --obsidian-800: #7A6E48; --obsidian-900: #9A8A60; --ivory-50: #F8F4E8; --ivory-100: #F0E8CC; --ivory-200: #DDD0A0; --ivory-400: #C8B878; --ivory-600: #A89848; --ivory-800: #7A7030; --ivory-900: #4A4218; --gold-50: #FDF4D8; --gold-100: #F8E8A8; --gold-200: #F0D068; --gold-400: #B8902A; --gold-600: #8A6818; --gold-800: #5A4010; --gold-900: #382808; --background: var(--ivory-50); --foreground: var(--ivory-900); --card: var(--ivory-100); --card-foreground: var(--ivory-900); --popover: var(--ivory-100); --popover-foreground: var(--ivory-900); --primary: var(--gold-400); --primary-foreground: #FFFFFF; --secondary: var(--ivory-200); --secondary-foreground: var(--ivory-800); --muted: var(--ivory-100); --muted-foreground: var(--ivory-600); --accent: var(--ivory-50); --accent-foreground: var(--ivory-900); --destructive: #C0392B; --destructive-foreground: #FFFFFF; --border: var(--ivory-200); --input: var(--ivory-100); --ring: var(--gold-400); --sidebar: var(--obsidian-50); --sidebar-foreground: var(--obsidian-900); --sidebar-primary: var(--gold-400); --sidebar-primary-foreground: #FFFFFF; --sidebar-accent: var(--obsidian-200); --sidebar-accent-foreground: var(--obsidian-900); --sidebar-border: var(--obsidian-200); --sidebar-ring: var(--gold-400); --clinic-bg: var(--ivory-50); --clinic-sidebar: var(--obsidian-50); --clinic-sidebar-border: var(--obsidian-200); --clinic-sidebar-fg: var(--obsidian-900); --clinic-sidebar-muted: var(--obsidian-800); --clinic-nav-active-bg: var(--obsidian-200); --clinic-nav-active-fg: var(--gold-400); --clinic-nav-hover-bg: var(--obsidian-100); --clinic-nav-hover-fg: var(--obsidian-900); --clinic-nav-fg: var(--obsidian-800); --clinic-avatar-bg: var(--obsidian-200); --clinic-avatar-border: var(--obsidian-400); --clinic-divider: var(--obsidian-200); --clinic-overlay: rgba(10, 8, 4, 0.6); --status-today-bg: var(--gold-100); --status-today-text: var(--gold-800); --status-today-border: var(--gold-200); --status-scheduled-bg: var(--ivory-100); --status-scheduled-text: var(--ivory-800); --status-scheduled-border: var(--ivory-200); --status-pending-bg: var(--ivory-50); --status-pending-text: var(--ivory-600); --status-pending-border: var(--ivory-200); --status-followup-bg: var(--gold-50); --status-followup-text: var(--gold-600); --status-followup-border: var(--gold-100); --status-active-bg: var(--ivory-50); --status-active-text: var(--ivory-600); --status-active-border: var(--ivory-200); --status-completed-bg: var(--ivory-100); --status-completed-text: var(--ivory-600); --status-completed-border: var(--ivory-200); --status-cancelled-bg: #FDF0EF; --status-cancelled-text: #8A2020; --status-cancelled-border: #F0C4BF; --color-chart-1: var(--gold-400); --color-chart-2: var(--ivory-400); --color-chart-3: var(--obsidian-600); --color-chart-4: var(--gold-200); --color-chart-5: var(--ivory-200); } /* ================================================================ 05 · LAVENDER MIST Soft purple neutrals · violet primary · calming, spa, wellbeing MIST ramp (neutral spine — pale lavender) 50 #F6F4FC 100 #EDE8F8 200 #D8D0EE 400 #B0A8D8 600 #8878C0 800 #4A3898 900 #2A2070 VIOLET ramp (primary action) 50 #EDE8F8 100 #DDD8F4 200 #C0B8E8 400 #7058C8 600 #5040A8 800 #382880 900 #201858 DUSK ramp (grey — blue-lavender) 50 #F2F0F8 100 #E4E0F0 200 #C8C0E0 400 #9890B8 600 #6860A0 800 #403878 900 #201860 ================================================================ */ [data-theme="lavender-mist"][data-theme="lavender-mist"] { --mist-50: #F6F4FC; --mist-100: #EDE8F8; --mist-200: #D8D0EE; --mist-400: #B0A8D8; --mist-600: #8878C0; --mist-800: #4A3898; --mist-900: #2A2070; --violet-50: #EDE8F8; --violet-100: #DDD8F4; --violet-200: #C0B8E8; --violet-400: #7058C8; --violet-600: #5040A8; --violet-800: #382880; --violet-900: #201858; --dusk-50: #F2F0F8; --dusk-100: #E4E0F0; --dusk-200: #C8C0E0; --dusk-400: #9890B8; --dusk-600: #6860A0; --dusk-800: #403878; --dusk-900: #201860; --background: var(--mist-50); --foreground: var(--dusk-900); --card: var(--violet-50); --card-foreground: var(--dusk-900); --popover: var(--violet-50); --popover-foreground: var(--dusk-900); --primary: var(--violet-400); --primary-foreground: #FFFFFF; --secondary: var(--violet-100); --secondary-foreground: var(--violet-800); --muted: var(--dusk-100); --muted-foreground: var(--dusk-600); --accent: var(--dusk-50); --accent-foreground: var(--dusk-900); --destructive: #C0392B; --destructive-foreground: #FFFFFF; --border: var(--mist-200); --input: var(--dusk-100); --ring: var(--violet-400); --sidebar: var(--mist-50); --sidebar-foreground: var(--dusk-900); --sidebar-primary: var(--violet-400); --sidebar-primary-foreground: #FFFFFF; --sidebar-accent: var(--violet-100); --sidebar-accent-foreground: var(--violet-800); --sidebar-border: var(--mist-200); --sidebar-ring: var(--violet-400); --clinic-bg: var(--mist-50); --clinic-sidebar: var(--mist-50); --clinic-sidebar-border: var(--mist-200); --clinic-sidebar-fg: var(--dusk-900); --clinic-sidebar-muted: var(--dusk-600); --clinic-nav-active-bg: var(--violet-100); --clinic-nav-active-fg: var(--violet-800); --clinic-nav-hover-bg: var(--dusk-50); --clinic-nav-hover-fg: var(--dusk-900); --clinic-nav-fg: var(--dusk-600); --clinic-avatar-bg: var(--mist-100); --clinic-avatar-border: var(--mist-200); --clinic-divider: var(--mist-200); --clinic-overlay: rgba(32, 24, 80, 0.4); --status-today-bg: var(--violet-100); --status-today-text: var(--violet-800); --status-today-border: var(--violet-200); --status-scheduled-bg: var(--mist-100); --status-scheduled-text: var(--mist-800); --status-scheduled-border: var(--mist-200); --status-pending-bg: var(--dusk-100); --status-pending-text: var(--dusk-800); --status-pending-border: var(--dusk-200); --status-followup-bg: var(--violet-50); --status-followup-text: var(--violet-600); --status-followup-border: var(--violet-100); --status-active-bg: var(--mist-50); --status-active-text: var(--mist-600); --status-active-border: var(--mist-200); --status-completed-bg: var(--dusk-50); --status-completed-text: var(--dusk-600); --status-completed-border: var(--dusk-200); --status-cancelled-bg: #FDF0EF; --status-cancelled-text: #8A2020; --status-cancelled-border: #F0C4BF; --color-chart-1: var(--violet-400); --color-chart-2: var(--mist-400); --color-chart-3: var(--dusk-400); --color-chart-4: var(--violet-200); --color-chart-5: var(--dusk-200); } /* ================================================================ 06 · COPPER BONE Bone-white canvas · burnt copper primary · confident, tactile BONE ramp (neutral spine) 50 #FAF5F0 100 #F0E4D8 200 #E0C8B8 400 #C8A888 600 #A07860 800 #683C20 900 #401E0A COPPER ramp (primary action) 50 #FDF0E8 100 #F8D8C0 200 #F0B898 400 #C05828 600 #983E18 800 #682010 900 #400E06 CLAY ramp (grey — warm orange-brown) 50 #F8F2EC 100 #EEE0D0 200 #D8C0A8 400 #B09078 600 #806048 800 #503020 900 #301808 ================================================================ */ [data-theme="copper-bone"][data-theme="copper-bone"] { --bone-50: #FAF5F0; --bone-100: #F0E4D8; --bone-200: #E0C8B8; --bone-400: #C8A888; --bone-600: #A07860; --bone-800: #683C20; --bone-900: #401E0A; --copper-50: #FDF0E8; --copper-100: #F8D8C0; --copper-200: #F0B898; --copper-400: #C05828; --copper-600: #983E18; --copper-800: #682010; --copper-900: #400E06; --clay-50: #F8F2EC; --clay-100: #EEE0D0; --clay-200: #D8C0A8; --clay-400: #B09078; --clay-600: #806048; --clay-800: #503020; --clay-900: #301808; --background: var(--bone-50); --foreground: var(--clay-900); --card: var(--copper-50); --card-foreground: var(--clay-900); --popover: var(--copper-50); --popover-foreground: var(--clay-900); --primary: var(--copper-400); --primary-foreground: #FFFFFF; --secondary: var(--copper-100); --secondary-foreground: var(--copper-800); --muted: var(--clay-100); --muted-foreground: var(--clay-600); --accent: var(--clay-50); --accent-foreground: var(--clay-900); --destructive: #C0392B; --destructive-foreground: #FFFFFF; --border: var(--bone-200); --input: var(--clay-100); --ring: var(--copper-400); --sidebar: var(--bone-50); --sidebar-foreground: var(--clay-900); --sidebar-primary: var(--copper-400); --sidebar-primary-foreground: #FFFFFF; --sidebar-accent: var(--copper-100); --sidebar-accent-foreground: var(--copper-800); --sidebar-border: var(--bone-200); --sidebar-ring: var(--copper-400); --clinic-bg: var(--bone-50); --clinic-sidebar: var(--bone-50); --clinic-sidebar-border: var(--bone-200); --clinic-sidebar-fg: var(--clay-900); --clinic-sidebar-muted: var(--clay-600); --clinic-nav-active-bg: var(--copper-100); --clinic-nav-active-fg: var(--copper-800); --clinic-nav-hover-bg: var(--clay-50); --clinic-nav-hover-fg: var(--clay-900); --clinic-nav-fg: var(--clay-600); --clinic-avatar-bg: var(--bone-100); --clinic-avatar-border: var(--bone-200); --clinic-divider: var(--bone-200); --clinic-overlay: rgba(48, 24, 8, 0.4); --status-today-bg: var(--copper-100); --status-today-text: var(--copper-800); --status-today-border: var(--copper-200); --status-scheduled-bg: var(--bone-100); --status-scheduled-text: var(--bone-800); --status-scheduled-border: var(--bone-200); --status-pending-bg: var(--clay-100); --status-pending-text: var(--clay-800); --status-pending-border: var(--clay-200); --status-followup-bg: var(--copper-50); --status-followup-text: var(--copper-600); --status-followup-border: var(--copper-100); --status-active-bg: var(--bone-50); --status-active-text: var(--bone-600); --status-active-border: var(--bone-200); --status-completed-bg: var(--clay-50); --status-completed-text: var(--clay-600); --status-completed-border: var(--clay-200); --status-cancelled-bg: #FDF0EF; --status-cancelled-text: #8A2020; --status-cancelled-border: #F0C4BF; --color-chart-1: var(--copper-400); --color-chart-2: var(--bone-400); --color-chart-3: var(--clay-400); --color-chart-4: var(--copper-200); --color-chart-5: var(--clay-200); } /* ================================================================ 07 · MIDNIGHT TEAL Deep teal sidebar · mint canvas · vibrant teal primary DEEP ramp (sidebar — dark teal) 50 #0E2422 100 #142E2A 200 #183830 400 #1E4840 600 #285A50 800 #3A7060 900 #4A8878 MINT ramp (canvas — cool light) 50 #F2FAF8 100 #E0F4F0 200 #B8E0D8 400 #88C8B8 600 #4A9888 800 #1E6858 900 #0A3830 TEAL ramp (primary action) 50 #E0F8F4 100 #B8EEE4 200 #80D8C8 400 #0E9880 600 #087060 800 #044838 900 #022820 ================================================================ */ [data-theme="midnight-teal"][data-theme="midnight-teal"] { --deep-50: #0E2422; --deep-100: #142E2A; --deep-200: #183830; --deep-400: #1E4840; --deep-600: #285A50; --deep-800: #3A7060; --deep-900: #4A8878; --mint-50: #F2FAF8; --mint-100: #E0F4F0; --mint-200: #B8E0D8; --mint-400: #88C8B8; --mint-600: #4A9888; --mint-800: #1E6858; --mint-900: #0A3830; --teal-50: #E0F8F4; --teal-100: #B8EEE4; --teal-200: #80D8C8; --teal-400: #0E9880; --teal-600: #087060; --teal-800: #044838; --teal-900: #022820; --background: var(--mint-50); --foreground: var(--mint-900); --card: var(--teal-50); --card-foreground: var(--mint-900); --popover: var(--teal-50); --popover-foreground: var(--mint-900); --primary: var(--teal-400); --primary-foreground: #FFFFFF; --secondary: var(--teal-100); --secondary-foreground: var(--teal-800); --muted: var(--mint-100); --muted-foreground: var(--mint-600); --accent: var(--mint-50); --accent-foreground: var(--mint-900); --destructive: #C0392B; --destructive-foreground: #FFFFFF; --border: var(--mint-200); --input: var(--mint-100); --ring: var(--teal-400); --sidebar: var(--deep-50); --sidebar-foreground: var(--deep-900); --sidebar-primary: var(--teal-400); --sidebar-primary-foreground: #FFFFFF; --sidebar-accent: var(--deep-200); --sidebar-accent-foreground: var(--deep-900); --sidebar-border: var(--deep-200); --sidebar-ring: var(--teal-400); --clinic-bg: var(--mint-50); --clinic-sidebar: var(--deep-50); --clinic-sidebar-border: var(--deep-200); --clinic-sidebar-fg: var(--deep-900); --clinic-sidebar-muted: var(--deep-800); --clinic-nav-active-bg: var(--deep-200); --clinic-nav-active-fg: var(--teal-400); --clinic-nav-hover-bg: var(--deep-100); --clinic-nav-hover-fg: var(--deep-900); --clinic-nav-fg: var(--deep-800); --clinic-avatar-bg: var(--deep-200); --clinic-avatar-border: var(--deep-400); --clinic-divider: var(--deep-200); --clinic-overlay: rgba(6, 20, 18, 0.6); --status-today-bg: var(--teal-100); --status-today-text: var(--teal-800); --status-today-border: var(--teal-200); --status-scheduled-bg: var(--mint-100); --status-scheduled-text: var(--mint-800); --status-scheduled-border: var(--mint-200); --status-pending-bg: var(--mint-50); --status-pending-text: var(--mint-600); --status-pending-border: var(--mint-200); --status-followup-bg: var(--teal-50); --status-followup-text: var(--teal-600); --status-followup-border: var(--teal-100); --status-active-bg: var(--mint-50); --status-active-text: var(--mint-600); --status-active-border: var(--mint-200); --status-completed-bg: var(--mint-100); --status-completed-text: var(--mint-600); --status-completed-border: var(--mint-200); --status-cancelled-bg: #FDF0EF; --status-cancelled-text: #8A2020; --status-cancelled-border: #F0C4BF; --color-chart-1: var(--teal-400); --color-chart-2: var(--mint-400); --color-chart-3: var(--deep-600); --color-chart-4: var(--teal-200); --color-chart-5: var(--mint-200); } /* ================================================================ 08 · LINEN CHARCOAL Warm linen canvas · pure charcoal primary · minimal, timeless LINEN ramp (neutral spine) 50 #F6F4EE 100 #EDEBE4 200 #D8D4C8 400 #B0AE9E 600 #6A6858 800 #3A3828 900 #1A1810 CHARCOAL ramp (primary action — monochrome) 50 #F0EEEA 100 #E0DED8 200 #C0BEB8 400 #5A5848 600 #3A3828 800 #2A2820 900 #1A1810 PUTTY ramp (grey — warm neutral) 50 #F4F2EC 100 #E8E6DE 200 #CCC8BE 400 #9A9888 600 #6A6858 800 #3A3830 900 #1E1C18 ================================================================ */ [data-theme="linen-charcoal"][data-theme="linen-charcoal"] { --linen-50: #F6F4EE; --linen-100: #EDEBE4; --linen-200: #D8D4C8; --linen-400: #B0AE9E; --linen-600: #6A6858; --linen-800: #3A3828; --linen-900: #1A1810; --charcoal-50: #F0EEEA; --charcoal-100: #E0DED8; --charcoal-200: #C0BEB8; --charcoal-400: #5A5848; --charcoal-600: #3A3828; --charcoal-800: #2A2820; --charcoal-900: #1A1810; --putty-50: #F4F2EC; --putty-100: #E8E6DE; --putty-200: #CCC8BE; --putty-400: #9A9888; --putty-600: #6A6858; --putty-800: #3A3830; --putty-900: #1E1C18; --background: var(--linen-50); --foreground: var(--charcoal-900); --card: var(--charcoal-50); --card-foreground: var(--charcoal-900); --popover: var(--charcoal-50); --popover-foreground: var(--charcoal-900); --primary: var(--charcoal-900); --primary-foreground: #FFFFFF; --secondary: var(--charcoal-100); --secondary-foreground: var(--charcoal-800); --muted: var(--putty-100); --muted-foreground: var(--putty-600); --accent: var(--putty-50); --accent-foreground: var(--putty-900); --destructive: #C0392B; --destructive-foreground: #FFFFFF; --border: var(--linen-200); --input: var(--putty-100); --ring: var(--charcoal-900); --sidebar: var(--linen-50); --sidebar-foreground: var(--charcoal-900); --sidebar-primary: var(--charcoal-900); --sidebar-primary-foreground: #FFFFFF; --sidebar-accent: var(--charcoal-100); --sidebar-accent-foreground: var(--charcoal-800); --sidebar-border: var(--linen-200); --sidebar-ring: var(--charcoal-900); --clinic-bg: var(--linen-50); --clinic-sidebar: var(--linen-50); --clinic-sidebar-border: var(--linen-200); --clinic-sidebar-fg: var(--charcoal-900); --clinic-sidebar-muted: var(--putty-600); --clinic-nav-active-bg: var(--charcoal-100); --clinic-nav-active-fg: var(--charcoal-800); --clinic-nav-hover-bg: var(--putty-50); --clinic-nav-hover-fg: var(--charcoal-900); --clinic-nav-fg: var(--putty-600); --clinic-avatar-bg: var(--linen-100); --clinic-avatar-border: var(--linen-200); --clinic-divider: var(--linen-200); --clinic-overlay: rgba(26, 24, 16, 0.4); --status-today-bg: var(--charcoal-100); --status-today-text: var(--charcoal-800); --status-today-border: var(--charcoal-200); --status-scheduled-bg: var(--linen-100); --status-scheduled-text: var(--linen-800); --status-scheduled-border: var(--linen-200); --status-pending-bg: var(--putty-100); --status-pending-text: var(--putty-800); --status-pending-border: var(--putty-200); --status-followup-bg: var(--charcoal-50); --status-followup-text: var(--charcoal-600); --status-followup-border: var(--charcoal-100); --status-active-bg: var(--linen-50); --status-active-text: var(--linen-600); --status-active-border: var(--linen-200); --status-completed-bg: var(--putty-50); --status-completed-text: var(--putty-600); --status-completed-border: var(--putty-200); --status-cancelled-bg: #FDF0EF; --status-cancelled-text: #8A2020; --status-cancelled-border: #F0C4BF; --color-chart-1: var(--charcoal-900); --color-chart-2: var(--linen-400); --color-chart-3: var(--putty-400); --color-chart-4: var(--charcoal-400); --color-chart-5: var(--linen-200); } /* ================================================================ 09 · MOCHA ROSE Blush-pink canvas · deep raspberry primary · intimate, bespoke BLUSH ramp (neutral spine) 50 #FAF2F4 100 #F4E4E8 200 #E8D0D4 400 #D0A0A8 600 #A87080 800 #703040 900 #401020 RASPBERRY ramp (primary action) 50 #FAE8EC 100 #F4D0D8 200 #E8A8B8 400 #A83050 600 #801828 800 #581018 900 #380810 MAUVE ramp (grey — pink-brown) 50 #F6F0F2 100 #EEE0E4 200 #D8C0C8 400 #B08898 600 #806078 800 #503048 900 #301828 ================================================================ */ [data-theme="mocha-rose"][data-theme="mocha-rose"] { --blush-50: #FAF2F4; --blush-100: #F4E4E8; --blush-200: #E8D0D4; --blush-400: #D0A0A8; --blush-600: #A87080; --blush-800: #703040; --blush-900: #401020; --raspberry-50: #FAE8EC; --raspberry-100: #F4D0D8; --raspberry-200: #E8A8B8; --raspberry-400: #A83050; --raspberry-600: #801828; --raspberry-800: #581018; --raspberry-900: #380810; --mauve-50: #F6F0F2; --mauve-100: #EEE0E4; --mauve-200: #D8C0C8; --mauve-400: #B08898; --mauve-600: #806078; --mauve-800: #503048; --mauve-900: #301828; --background: var(--blush-50); --foreground: var(--mauve-900); --card: var(--raspberry-50); --card-foreground: var(--mauve-900); --popover: var(--raspberry-50); --popover-foreground: var(--mauve-900); --primary: var(--raspberry-400); --primary-foreground: #FFFFFF; --secondary: var(--raspberry-100); --secondary-foreground: var(--raspberry-800); --muted: var(--mauve-100); --muted-foreground: var(--mauve-600); --accent: var(--mauve-50); --accent-foreground: var(--mauve-900); --destructive: #C0392B; --destructive-foreground: #FFFFFF; --border: var(--blush-200); --input: var(--mauve-100); --ring: var(--raspberry-400); --sidebar: var(--blush-50); --sidebar-foreground: var(--mauve-900); --sidebar-primary: var(--raspberry-400); --sidebar-primary-foreground: #FFFFFF; --sidebar-accent: var(--raspberry-100); --sidebar-accent-foreground: var(--raspberry-800); --sidebar-border: var(--blush-200); --sidebar-ring: var(--raspberry-400); --clinic-bg: var(--blush-50); --clinic-sidebar: var(--blush-50); --clinic-sidebar-border: var(--blush-200); --clinic-sidebar-fg: var(--mauve-900); --clinic-sidebar-muted: var(--mauve-600); --clinic-nav-active-bg: var(--raspberry-100); --clinic-nav-active-fg: var(--raspberry-800); --clinic-nav-hover-bg: var(--mauve-50); --clinic-nav-hover-fg: var(--mauve-900); --clinic-nav-fg: var(--mauve-600); --clinic-avatar-bg: var(--blush-100); --clinic-avatar-border: var(--blush-200); --clinic-divider: var(--blush-200); --clinic-overlay: rgba(48, 16, 32, 0.4); --status-today-bg: var(--raspberry-100); --status-today-text: var(--raspberry-800); --status-today-border: var(--raspberry-200); --status-scheduled-bg: var(--blush-100); --status-scheduled-text: var(--blush-800); --status-scheduled-border: var(--blush-200); --status-pending-bg: var(--mauve-100); --status-pending-text: var(--mauve-800); --status-pending-border: var(--mauve-200); --status-followup-bg: var(--raspberry-50); --status-followup-text: var(--raspberry-600); --status-followup-border: var(--raspberry-100); --status-active-bg: var(--blush-50); --status-active-text: var(--blush-600); --status-active-border: var(--blush-200); --status-completed-bg: var(--mauve-50); --status-completed-text: var(--mauve-600); --status-completed-border: var(--mauve-200); --status-cancelled-bg: #FDF0EF; --status-cancelled-text: #8A2020; --status-cancelled-border: #F0C4BF; --color-chart-1: var(--raspberry-400); --color-chart-2: var(--blush-400); --color-chart-3: var(--mauve-400); --color-chart-4: var(--raspberry-200); --color-chart-5: var(--mauve-200); } /* ================================================================ 10 · PEARL NOIR Full dark mode · warm obsidian surfaces · gold primary NOIR ramp (dark neutral spine) 50 #1A1610 100 #201C14 200 #2A2418 400 #3A3020 600 #504028 800 #7A6848 900 #A09060 PEARL ramp (text/light elements) 50 #F8F4EC 100 #F0E8D8 200 #E0D0B8 400 #C8B890 600 #A89870 800 #807050 900 #504030 GOLD ramp (primary action — warm, bright) 50 #FFF0C0 100 #FFE080 200 #F0C840 400 #C8A850 600 #A88830 800 #785E18 900 #483808 ================================================================ */ [data-theme="pearl-noir"][data-theme="pearl-noir"] { --noir-50: #1A1610; --noir-100: #201C14; --noir-200: #2A2418; --noir-400: #3A3020; --noir-600: #504028; --noir-800: #7A6848; --noir-900: #A09060; --pearl-50: #F8F4EC; --pearl-100: #F0E8D8; --pearl-200: #E0D0B8; --pearl-400: #C8B890; --pearl-600: #A89870; --pearl-800: #807050; --pearl-900: #504030; --gold-50: #FFF0C0; --gold-100: #FFE080; --gold-200: #F0C840; --gold-400: #C8A850; --gold-600: #A88830; --gold-800: #785E18; --gold-900: #483808; --background: var(--noir-100); --foreground: var(--pearl-50); --card: var(--noir-200); --card-foreground: var(--pearl-50); --popover: var(--noir-200); --popover-foreground: var(--pearl-50); --primary: var(--gold-400); --primary-foreground: var(--noir-50); --secondary: var(--noir-400); --secondary-foreground: var(--pearl-100); --muted: var(--noir-200); --muted-foreground: var(--noir-900); --accent: var(--noir-400); --accent-foreground: var(--pearl-100); --destructive: #E05050; --destructive-foreground: #FFFFFF; --border: rgba(200, 184, 144, 0.15); --input: rgba(200, 184, 144, 0.10); --ring: var(--gold-400); --sidebar: var(--noir-50); --sidebar-foreground: var(--pearl-100); --sidebar-primary: var(--gold-400); --sidebar-primary-foreground: var(--noir-50); --sidebar-accent: var(--noir-200); --sidebar-accent-foreground: var(--pearl-100); --sidebar-border: rgba(200, 184, 144, 0.12); --sidebar-ring: var(--gold-400); --clinic-bg: var(--noir-100); --clinic-sidebar: var(--noir-50); --clinic-sidebar-border: rgba(200, 184, 144, 0.12); --clinic-sidebar-fg: var(--pearl-100); --clinic-sidebar-muted: var(--noir-900); --clinic-nav-active-bg: var(--noir-200); --clinic-nav-active-fg: var(--gold-400); --clinic-nav-hover-bg: var(--noir-100); --clinic-nav-hover-fg: var(--pearl-100); --clinic-nav-fg: var(--noir-900); --clinic-avatar-bg: var(--noir-200); --clinic-avatar-border: var(--noir-400); --clinic-divider: rgba(200, 184, 144, 0.12); --clinic-overlay: rgba(10, 8, 4, 0.7); --status-today-bg: rgba(200, 168, 80, 0.20); --status-today-text: var(--gold-200); --status-today-border: rgba(200, 168, 80, 0.35); --status-scheduled-bg: rgba(160, 144, 96, 0.15); --status-scheduled-text: var(--pearl-200); --status-scheduled-border: rgba(160, 144, 96, 0.25); --status-pending-bg: rgba(122, 104, 72, 0.15); --status-pending-text: var(--noir-900); --status-pending-border: rgba(122, 104, 72, 0.25); --status-followup-bg: rgba(200, 168, 80, 0.12); --status-followup-text: var(--gold-200); --status-followup-border: rgba(200, 168, 80, 0.20); --status-active-bg: rgba(160, 144, 96, 0.12); --status-active-text: var(--pearl-200); --status-active-border: rgba(160, 144, 96, 0.20); --status-completed-bg: rgba(80, 64, 40, 0.20); --status-completed-text: var(--noir-900); --status-completed-border: rgba(80, 64, 40, 0.30); --status-cancelled-bg: rgba(192, 57, 43, 0.20); --status-cancelled-text: #F5A5A0; --status-cancelled-border: rgba(192, 57, 43, 0.35); --color-chart-1: var(--gold-400); --color-chart-2: var(--pearl-400); --color-chart-3: var(--noir-800); --color-chart-4: var(--gold-200); --color-chart-5: var(--noir-600); }