/*
 * 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 — warm brown, drives CTAs / wordmark / icons.
       Derived from the app's warm beige/tan brand (ThemePrimary #E8DCC4,
       ThemeAccent #C9A58A); see stillen-build + the iOS Assets.xcassets. */
    --primary: 122 92 67; /* #7a5c43 warm brown */
    --on-primary: 255 255 255; /* #ffffff */
    --primary-container: 232 220 196; /* #e8dcc4 app ThemePrimary (beige) */
    --on-primary-container: 74 63 53; /* #4a3f35 */
    --primary-fixed: 239 230 215; /* #efe6d7 cream (feature icon circles) */
    --primary-fixed-dim: 224 210 188; /* #e0d2bc */
    --on-primary-fixed: 58 46 35; /* #3a2e23 */
    --on-primary-fixed-variant: 111 85 64; /* #6f5540 */

    /* Secondary — tan accent (app ThemeAccent): pulse dot, link hovers */
    --secondary: 201 165 138; /* #c9a58a app ThemeAccent (tan) */
    --on-secondary: 58 46 35; /* #3a2e23 */
    --secondary-container: 240 224 207; /* #f0e0cf */
    --on-secondary-container: 90 70 50; /* #5a4632 */
    --secondary-fixed: 240 224 207; /* #f0e0cf */
    --secondary-fixed-dim: 227 201 175; /* #e3c9af */
    --on-secondary-fixed: 42 28 15; /* #2a1c0f */
    --on-secondary-fixed-variant: 111 85 64; /* #6f5540 */

    /* Tertiary — taupe (app ThemeSecondary) */
    --tertiary: 168 139 108; /* #a88b6c app ThemeSecondary (taupe) */
    --on-tertiary: 255 255 255; /* #ffffff */
    --tertiary-container: 234 219 200; /* #eadbc8 */
    --on-tertiary-container: 90 70 50; /* #5a4632 */
    --tertiary-fixed: 234 219 200; /* #eadbc8 */
    --tertiary-fixed-dim: 214 192 164; /* #d6c0a4 */
    --on-tertiary-fixed: 42 28 15; /* #2a1c0f */
    --on-tertiary-fixed-variant: 111 85 64; /* #6f5540 */

    /* Error — semantic red kept for clarity */
    --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 + beige, matches the app */
    --background: 250 247 242; /* #faf7f2 app ThemeBackground */
    --on-background: 74 63 53; /* #4a3f35 app ThemeTextPrimary (warm brown) */
    --surface: 250 247 242; /* #faf7f2 */
    --on-surface: 74 63 53; /* #4a3f35 */
    --surface-variant: 236 227 213; /* #ece3d5 */
    --on-surface-variant: 110 93 72; /* #6e5d48 muted brown (legible) */
    --surface-tint: 97 74 55; /* #614a37 (CTA hover darken) */
    --surface-bright: 255 255 255; /* #ffffff */
    --surface-dim: 237 228 214; /* #ede4d6 */
    --surface-container-lowest: 255 255 255; /* #ffffff */
    --surface-container-low: 244 238 228; /* #f4eee4 (cards) */
    --surface-container: 239 231 218; /* #efe7da */
    --surface-container-high: 233 224 209; /* #e9e0d1 */
    --surface-container-highest: 227 217 200; /* #e3d9c8 */

    /* Inverse & outlines */
    --inverse-surface: 58 51 43; /* #3a332b */
    --inverse-on-surface: 245 239 230; /* #f5efe6 */
    --inverse-primary: 232 220 196; /* #e8dcc4 */
    --outline: 139 122 102; /* #8b7a66 */
    --outline-variant: 216 203 184; /* #d8cbb8 */
}

/* 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;
}