/* === FLEUR design tokens (W7) === * * Single source of truth for colour, spacing and type scale across both * style.css (Database / Gallery) and designer.css (Garden Designer). * Loaded BEFORE the page-specific stylesheets so per-page rules can override. * * Theme switching: * - JS toggle: | * - System fallback: prefers-color-scheme media query (used when no * data-theme attribute is set). */ :root { /* Colour primitives — botanical palette Values match style.css / designer.css (production). Tokens.css is the single source of truth; page CSS no longer redeclares these. */ --sage: #7A9E7E; --sage-dark: #5A7D5E; --sage-text: #5d7a3a; /* WCAG AA-safe sage for text/buttons on cream/white (4.55:1) */ --sage-light: rgba(122,158,126,0.1); --olive: #6a7a4a; --cream: #FAF7F2; --cream-dark: #F0EBE1; --paper: #fbf7ee; --terracotta: #b75a3a; --bark: #6a4a2a; /* Plant-type palette is defined in style.css (--type-*) and designer.css (--color-*). Naming consolidation deferred — see MEMORY.md Session 20. */ /* Semantic light-mode tokens */ --colour-bg: var(--cream); --colour-surface: var(--paper); --colour-surface-2: #efe8d6; --colour-text: #2c2c2c; --colour-text-muted: #6a6a6a; --colour-border: #e0d8c8; --colour-primary: var(--sage); --colour-primary-dark: var(--sage-dark); --colour-danger: #b94a4a; --colour-warning: #c89a30; --colour-success: #4a8a3a; /* Spacing scale (4px base) */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* Type scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; /* Radii */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06); --shadow-md: 0 4px 12px rgba(20, 20, 20, 0.10); --shadow-lg: 0 12px 28px rgba(20, 20, 20, 0.14); /* Z layers */ --z-toolbar: 50; --z-modal: 100; --z-toast: 200; --z-tooltip: 300; /* Mobile sheet / FAB layout (S28) — layout values, no dark variant. Used by .fleur-sheet*, .mobile-fab-bar in designer.css. */ --fab-height: 52px; --sheet-peek-height: 42vh; --mobile-breakpoint-px: 600px; } /* Dark theme — applied either via JS toggle or system preference. Brand colour overrides mirror the dark values from style.css/designer.css. */ [data-theme="dark"] { --sage: #8CB590; --sage-dark: #A5D4A9; --sage-text: #A5D4A9; /* In dark mode contrast inverts: light sage on dark surface */ --sage-light: rgba(140,181,144,0.12); --cream: #1A1D1E; --cream-dark: #232729; --colour-bg: #1a1a1c; --colour-surface: #232325; --colour-surface-2: #2c2c2f; --colour-text: #e6e1d3; --colour-text-muted: #a9a39a; --colour-border: #3a3a3d; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --sage: #8CB590; --sage-dark: #A5D4A9; --sage-text: #A5D4A9; --sage-light: rgba(140,181,144,0.12); --cream: #1A1D1E; --cream-dark: #232729; --colour-bg: #1a1a1c; --colour-surface: #232325; --colour-surface-2: #2c2c2f; --colour-text: #e6e1d3; --colour-text-muted: #a9a39a; --colour-border: #3a3a3d; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6); } } /* === Toast — cross-page primitive (S24) ================================== */ .toast-container { position: fixed; bottom: 5rem; right: 2rem; z-index: 300; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } .toast { padding: 0.65rem 1.1rem; background: var(--charcoal); color: var(--cream); border-radius: 8px; font-size: 0.8rem; font-weight: 400; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); transform: translateX(100px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: auto; display: flex; align-items: center; gap: 0.5rem; } .toast.visible { transform: translateX(0); opacity: 1; } .toast-icon { font-size: 1rem; line-height: 1; } @media (max-width: 600px) { .toast-container { bottom: 6rem; } }