/*
 * ============================================================
 *  THERAPICK — Global CSS Variables
 *  /assets/css/variables.css
 *
 *  Change colors here — updates the entire site instantly.
 * ============================================================
 */
:root {
    /* Brand Purple */
    --sage:        #603467;
    --sage-light:  #8f539b;
    --sage-pale:   #f3eaf5;
    --sage-dark:   #3d1f45;

    /* Accent Slate */
    --accent:      #5b6576;
    --accent-light:#8a95a3;
    --accent-pale: #eaecf0;

    /* Neutrals */
    --warm:        #f5f0e8;
    --warm-mid:    #e2d9cc;
    --cream:       #faf8f4;
    --white:       #ffffff;
    --page-bg:     #f0ede8;

    /* Text */
    --text:        #1c1c1c;
    --text-mid:    #4a4a4a;
    --text-light:  #7a7a7a;

    /* Dark backgrounds */
    --dark-bg:     #1e1025;
    --dark-bg-2:   #2a1232;
    --dark-bg-3:   #160a1a;

    /* Success */
    --color-success:           #2d7a4a;
    --color-success-bg:        #e6f4ed;
    --color-success-border:    #b7ddc8;

    /* Error */
    --color-error:             #c0392b;
    --color-error-bg:          #fff0f0;
    --color-error-border:      #ffcccc;
    --color-error-dark:        #991b1b;
    --color-error-bg-dark:     #fee2e2;
    --color-error-border-dark: #fca5a5;

    /* Warning */
    --color-warning:           #92400e;
    --color-warning-bg:        #fef3e2;
    --color-warning-border:    #fcd34d;
    --color-warning-mid:       #b45309;

    /* Semantic */
    --color-accepting:         #4caf82;
    --color-accepting-text:    #7fffc4;
    --color-accepting-bg:      #e8f8ef;
    --color-stars:             #f0a500;
    --color-danger:            #c0392b;
    --color-danger-dark:       #b91c1c;
    --color-logout:            #ff8080;
    --color-telehealth:        #1a6fb0;
    --color-telehealth-bg:     #e8f4ff;
    --color-filter-hover:      #d0e4d8;

    /* Premium */
    --premium: #5b6576;

    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Outfit', system-ui, sans-serif;

    /* Shape */
    --radius:    16px;
    --radius-sm: 10px;
    --radius-xs: 6px;

    /* Shadows */
    --shadow:       0 2px 16px rgba(0,0,0,0.07);
    --shadow-hover: 0 8px 32px rgba(0,0,0,0.12);
    --shadow-lg:    0 24px 80px rgba(0,0,0,0.2);

    /* Layout */
    --sidebar-w: 240px;
}