/* SAGE — visual direction presets. Set data-theme on . Default (no attr) = "Warm Sage". These override tokens.css vars. */ /* ---------- CLINICAL CALM — cooler teal, crisp, precise ---------- */ html[data-theme="calm"] { --font-display: "Source Serif 4", Georgia, serif; --paper: oklch(0.989 0.005 230); --cream: oklch(0.972 0.008 228); --sand: oklch(0.945 0.010 228); --sand-deep:oklch(0.912 0.012 228); --line: oklch(0.892 0.010 228); --line-soft:oklch(0.930 0.008 228); --stone-700:oklch(0.44 0.012 232); --stone-500:oklch(0.56 0.011 232); --ink: oklch(0.27 0.020 235); --green-50: oklch(0.972 0.018 200); --green-100: oklch(0.938 0.038 198); --green-200: oklch(0.886 0.062 196); --green-300: oklch(0.815 0.085 194); --green-400: oklch(0.715 0.100 192); --green-500: oklch(0.610 0.103 191); --green-600: oklch(0.520 0.098 190); --green-700: oklch(0.442 0.082 191); --green-800: oklch(0.362 0.062 193); --green-900: oklch(0.288 0.044 198); --apricot-100: oklch(0.945 0.034 232); --apricot-300: oklch(0.840 0.072 235); --apricot-500: oklch(0.700 0.110 240); --apricot-600: oklch(0.610 0.118 245); --apricot-700: oklch(0.520 0.110 248); --r-xs: 4px; --r-sm: 6px; --r-md: 9px; --r-lg: 13px; --r-xl: 18px; --r-2xl: 24px; } /* ---------- GARDEN — botanical, olive/forest, terracotta, soft ---------- */ html[data-theme="garden"] { --font-display: "Source Serif 4", Georgia, serif; --paper: oklch(0.984 0.014 95); --cream: oklch(0.966 0.020 92); --sand: oklch(0.938 0.026 88); --sand-deep:oklch(0.905 0.030 86); --line: oklch(0.885 0.022 88); --line-soft:oklch(0.925 0.018 90); --stone-700:oklch(0.43 0.020 80); --stone-500:oklch(0.55 0.018 78); --ink: oklch(0.26 0.022 75); --green-50: oklch(0.964 0.026 130); --green-100: oklch(0.928 0.046 128); --green-200: oklch(0.872 0.072 126); --green-300: oklch(0.792 0.092 124); --green-400: oklch(0.688 0.104 122); --green-500: oklch(0.582 0.104 122); --green-600: oklch(0.498 0.094 123); --green-700: oklch(0.420 0.078 124); --green-800: oklch(0.348 0.060 126); --green-900: oklch(0.282 0.044 128); --apricot-100: oklch(0.940 0.044 48); --apricot-300: oklch(0.828 0.094 42); --apricot-500: oklch(0.668 0.132 36); --apricot-600: oklch(0.588 0.140 32); --apricot-700: oklch(0.508 0.128 30); --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-2xl: 40px; }