/*
 * Stillen — landing page color palette
 * ------------------------------------
 * The full Material 3 token set from the landing page, centralized here as
 * CSS custom properties. Values are space-separated RGB channels (not hex) so
 * Tailwind opacity modifiers such as `bg-primary/20` keep working via
 * `rgb(var(--token) / <alpha-value>)` in tailwind.config. Change a value here
 * and every usage across the page updates. Hex shown in comments for reference.
 */
:root {
    /* Primary — NOTE: this is a forest green, not Stillen's warm beige/tan brand
       (app ThemePrimary ≈ #E8DCC4, ThemeAccent ≈ #C9A58A). See note in README. */
    --primary: 51 69 55; /* #334537 */
    --on-primary: 255 255 255; /* #ffffff */
    --primary-container: 74 93 78; /* #4a5d4e */
    --on-primary-container: 192 213 194; /* #c0d5c2 */
    --primary-fixed: 211 232 213; /* #d3e8d5 */
    --primary-fixed-dim: 183 204 185; /* #b7ccb9 */
    --on-primary-fixed: 14 31 19; /* #0e1f13 */
    --on-primary-fixed-variant: 57 75 61; /* #394b3d */

    /* Secondary — warm brown, consistent with the app's warm palette */
    --secondary: 127 85 54; /* #7f5536 */
    --on-secondary: 255 255 255; /* #ffffff */
    --secondary-container: 254 198 160; /* #fec6a0 */
    --on-secondary-container: 121 80 50; /* #795032 */
    --secondary-fixed: 255 220 197; /* #ffdcc5 */
    --secondary-fixed-dim: 242 187 149; /* #f2bb95 */
    --on-secondary-fixed: 48 20 0; /* #301400 */
    --on-secondary-fixed-variant: 100 62 33; /* #643e21 */

    /* Tertiary — muted mauve/rose */
    --tertiary: 85 58 62; /* #553a3e */
    --on-tertiary: 255 255 255; /* #ffffff */
    --tertiary-container: 110 81 85; /* #6e5155 */
    --on-tertiary-container: 236 198 202; /* #ecc6ca */
    --tertiary-fixed: 255 217 222; /* #ffd9de */
    --tertiary-fixed-dim: 227 189 194; /* #e3bdc2 */
    --on-tertiary-fixed: 43 21 25; /* #2b1519 */
    --on-tertiary-fixed-variant: 91 64 67; /* #5b4043 */

    /* Error */
    --error: 186 26 26; /* #ba1a1a */
    --on-error: 255 255 255; /* #ffffff */
    --error-container: 255 218 214; /* #ffdad6 */
    --on-error-container: 147 0 10; /* #93000a */

    /* Surfaces & neutrals — warm off-white, matches app background (#FAF7F2) */
    --background: 251 249 246; /* #fbf9f6 */
    --on-background: 27 28 26; /* #1b1c1a */
    --surface: 251 249 246; /* #fbf9f6 */
    --on-surface: 27 28 26; /* #1b1c1a */
    --surface-variant: 228 226 224; /* #e4e2e0 */
    --on-surface-variant: 67 72 67; /* #434843 */
    --surface-tint: 80 99 84; /* #506354 */
    --surface-bright: 251 249 246; /* #fbf9f6 */
    --surface-dim: 219 218 215; /* #dbdad7 */
    --surface-container-lowest: 255 255 255; /* #ffffff */
    --surface-container-low: 245 243 241; /* #f5f3f1 */
    --surface-container: 239 238 235; /* #efeeeb */
    --surface-container-high: 233 232 229; /* #e9e8e5 */
    --surface-container-highest: 228 226 224; /* #e4e2e0 */

    /* Inverse & outlines */
    --inverse-surface: 48 49 47; /* #30312f */
    --inverse-on-surface: 242 240 238; /* #f2f0ee */
    --inverse-primary: 183 204 185; /* #b7ccb9 */
    --outline: 115 120 114; /* #737872 */
    --outline-variant: 195 200 193; /* #c3c8c1 */
}

/* Material Symbols icon font utility — moved out of the page's inline
   <style type="text/tailwindcss"> block into this shared stylesheet. */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    /* Enable the ligatures that turn "spa"/"air"/etc. into glyphs. The
       unprefixed property is required — Tailwind's preflight resets
       font-feature-settings, and modern browsers ignore the -webkit- alias. */
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}