/*
 * Truehome Theme
 *
 * Navy:  #293237 (primary dark, text, headers, buttons)
 * Beige: #e9e8e4 (background, secondary surfaces)
 */

: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 */

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

    /* Shadows */
    --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.1), 0 2px 6px -2px rgba(0, 0, 0, 0.06);
    --shadow-primary: 0 4px 14px -3px rgba(41, 50, 55, 0.15);
}