/*
 * Truehome Theme — "Warm Modernist Estate"
 *
 * Navy:       #293237 (primary dark, text, headers, buttons)
 * Beige:      #e9e8e4 (background, secondary surfaces)
 * Teal:       #0D9488 (interactive accent — links, CTAs, active)
 * Warm Amber: #D97706 (price highlights, badges, warm accent)
 */

:root {
    /* Primary Colors */
    --color-primary: #293237;        /* Navy - buttons, accents */
    --color-primary-hover: #1e262a;  /* Darker navy for hover */
    --color-primary-light: #e9e8e4;  /* Beige background */
    --color-primary-100: #f2f1ee;    /* Very light beige */
    --color-primary-200: #d4d2cc;    /* Mid beige */
    --color-primary-700: #293237;    /* Navy */
    --color-primary-800: #1e262a;    /* Darker navy */
    --color-primary-900: #141c1f;    /* Darkest navy */

    /* Background Colors */
    --color-bg-page: #e9e8e4;        /* Beige background */
    --color-bg-card: #ffffff;        /* White cards */
    --color-bg-hover: #dddbd5;       /* Slightly darker beige */
    --color-bg-accent: #293237;      /* Navy accent */

    /* Text Colors */
    --color-text-primary: #293237;   /* Navy */
    --color-text-secondary: #4a5963; /* Mid navy-gray */
    --color-text-muted: #8a9399;     /* Muted navy-gray */
    --color-text-on-primary: #e9e8e4; /* Beige text on navy buttons */

    /* Border Colors */
    --color-border: #d4d2cc;         /* Muted beige border */
    --color-border-hover: #b8b5ae;   /* Darker beige border hover */
    --color-border-focus: #293237;   /* Navy focus */

    /* Accent — used for links, focus rings, active states */
    --color-accent: #0D9488;         /* Teal-600: modern, trustworthy, distinctive */
    --color-accent-hover: #0F766E;   /* Teal-700 */
    --color-accent-light: #CCFBF1;   /* Teal-100 */

    /* Warm accent — used for prices, highlights, badges */
    --color-warm: #D97706;           /* Amber-600 */
    --color-warm-hover: #B45309;     /* Amber-700 */
    --color-warm-light: #FEF3C7;     /* Amber-100 */
    --color-warm-50: #FFFBEB;        /* Amber-50 */

    /* Focus Ring */
    --color-focus-ring: rgba(13, 148, 136, 0.25);

    /* Shadows — layered for depth */
    --shadow-card: 0 1px 3px 0 rgba(41, 50, 55, 0.04), 0 1px 2px -1px rgba(41, 50, 55, 0.03);
    --shadow-card-hover: 0 10px 25px -5px rgba(41, 50, 55, 0.08), 0 4px 10px -3px rgba(41, 50, 55, 0.04);
    --shadow-primary: 0 4px 14px -3px rgba(41, 50, 55, 0.2);
    --shadow-elevated: 0 20px 40px -12px rgba(41, 50, 55, 0.12);

    /* Hero gradients */
    --gradient-hero: linear-gradient(135deg, #293237 0%, #1e262a 40%, #0D9488 100%);
    --gradient-hero-rent: linear-gradient(135deg, #1e262a 0%, #293237 50%, #0F766E 100%);
    --gradient-warm-overlay: linear-gradient(180deg, rgba(41, 50, 55, 0) 0%, rgba(41, 50, 55, 0.03) 100%);

    /* Animation timing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-enter: 600ms;
    --duration-stagger: 80ms;
}