/* ============================================================ Lucatopia — Theme tokens `:root` = mode clair (défaut), `.dark` = mode sombre (override). La classe `dark` est appliquée sur par un script inline au boot (voir App.razor) + via le toggle dans Réglages. ============================================================ */ /* Blueprint base (light) — fond blanc cassé / beige doux (chroma chaude subtile, hue ~85) */ :root { --background: oklch(0.975 0.013 85); --foreground: oklch(0.145 0 0); --card: oklch(0.985 0.010 85); --card-foreground: oklch(0.145 0 0); --popover: oklch(0.990 0.008 85); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.955 0.016 85); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.955 0.016 85); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.955 0.016 85); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.910 0.014 85); --input: oklch(0.910 0.014 85); --ring: oklch(0.708 0 0); --alert-success: oklch(0.55 0.20 142); --alert-success-foreground: oklch(0.30 0.09 142); --alert-success-bg: oklch(0.993 0.003 142); --alert-info: oklch(0.50 0.20 255); --alert-info-foreground: oklch(0.30 0.10 255); --alert-info-bg: oklch(0.993 0.003 255); --alert-warning: oklch(0.68 0.18 55); --alert-warning-foreground: oklch(0.35 0.10 55); --alert-warning-bg: oklch(0.995 0.003 55); --alert-danger: oklch(0.55 0.22 27); --alert-danger-foreground: oklch(0.30 0.12 27); --alert-danger-bg: oklch(0.993 0.003 27); --chart-1: oklch(0.81 0.10 252); --chart-2: oklch(0.62 0.19 260); --chart-3: oklch(0.55 0.22 263); --chart-4: oklch(0.49 0.22 264); --chart-5: oklch(0.42 0.18 266); --sidebar: oklch(0.970 0.013 85); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.955 0.016 85); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.910 0.014 85); --sidebar-ring: oklch(0.708 0 0); --radius: 0.625rem; --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-serif: ui-serif, Georgia, serif; --font-mono: ui-monospace, monospace; /* Motion (theme-agnostic) */ --motion-duration-fast: 120ms; --motion-duration-normal: 200ms; --motion-duration-slow: 320ms; --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-bounce: cubic-bezier(0.2, 0.85, 0.2, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Typography scale (theme-agnostic reference) */ --text-xs: 0.72rem; --text-sm: 0.85rem; --text-base: 0.95rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.625rem; /* App-specific event colors — same hues as dark mode, lightness/chroma adaptés au fond clair */ --event-sleep: oklch(0.55 0.20 280); /* violet/indigo */ --event-bottle: oklch(0.58 0.16 220); /* cyan/blue */ --event-meal: oklch(0.62 0.17 65); /* amber/orange */ --event-medical: oklch(0.56 0.18 155); /* emerald */ --event-vaccine: oklch(0.58 0.20 15); /* rose */ --event-growth: oklch(0.58 0.15 195); /* teal */ --event-temperature: oklch(0.60 0.20 40); /* orange/coral */ --event-diaper: oklch(0.62 0.13 100); /* jaune-vert tendre */ /* Semantic aliases used in app components */ --app-bg: var(--background); --app-surface: var(--card); --app-surface-elevated: var(--popover); --app-text: var(--foreground); --app-text-muted: var(--muted-foreground); --app-border: var(--border); --app-accent: var(--primary); /* Elevation — ombres douces pour fond clair */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.14); --shadow-fab: 0 8px 22px rgba(0, 0, 0, 0.18); --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.14); --shadow-focus: 0 0 0 4px oklch(from var(--ring) l c h / 0.28); /* Hairline divider */ --divider: oklch(from var(--border) l c h / 0.6); /* Halo en haut du shell (desktop) — version claire : voile crème légèrement plus prononcé */ --shell-top-tint: oklch(0.940 0.018 85); } /* Dark mode — appliqué via `class="dark"` sur */ .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.269 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.371 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.275 0 0); --input: oklch(0.325 0 0); --ring: oklch(0.556 0 0); --alert-success: oklch(0.60 0.18 142); --alert-success-foreground: oklch(0.90 0.06 142); --alert-success-bg: oklch(0.18 0.008 142); --alert-info: oklch(0.55 0.18 255); --alert-info-foreground: oklch(0.90 0.05 255); --alert-info-bg: oklch(0.18 0.008 255); --alert-warning: oklch(0.65 0.16 55); --alert-warning-foreground: oklch(0.92 0.06 55); --alert-warning-bg: oklch(0.19 0.008 55); --alert-danger: oklch(0.55 0.20 27); --alert-danger-foreground: oklch(0.90 0.06 27); --alert-danger-bg: oklch(0.18 0.008 27); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.275 0 0); --sidebar-ring: oklch(0.439 0 0); /* App-specific event colors — distinct hues with consistent lightness/chroma */ --event-sleep: oklch(0.70 0.16 280); /* violet/indigo */ --event-bottle: oklch(0.74 0.14 220); /* cyan/blue */ --event-meal: oklch(0.78 0.15 65); /* amber/orange */ --event-medical: oklch(0.72 0.16 155); /* emerald */ --event-vaccine: oklch(0.72 0.18 15); /* rose */ --event-growth: oklch(0.74 0.13 195); /* teal */ --event-temperature: oklch(0.75 0.17 40); /* orange/coral */ --event-diaper: oklch(0.78 0.12 100); /* jaune-vert tendre */ /* Semantic aliases used in app components */ --app-bg: var(--background); --app-surface: var(--card); --app-surface-elevated: var(--popover); --app-text: var(--foreground); --app-text-muted: var(--muted-foreground); --app-border: var(--border); --app-accent: var(--primary); /* Elevation (depth-of-field on dark) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.40); --shadow-fab: 0 8px 22px rgba(0, 0, 0, 0.45); --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45); --shadow-focus: 0 0 0 4px oklch(from var(--ring) l c h / 0.28); /* Hairline divider */ --divider: oklch(from var(--border) l c h / 0.6); /* Halo en haut du shell (desktop) — version sombre : tache légèrement plus claire que le fond */ --shell-top-tint: oklch(0.20 0 0); }