:root {
    /* ===== Colors ===== */
    --bg:            #f3f4f6;
    --white:         #ffffff;
    --black:         #111827;
    --gray-dark:     #374151;
    --gray:          #4b5563;
    --gray-mid:      #6b7280;
    --gray-light:    #e5e7eb;
    --gray-soft:     #f9fafb;
    --border:        #cbd5e1;
    --cyan:          #0e7490;
    --cyan-deep:     #0891b2;
    --cyan-hover:    #0891b2;
    --cyan-bg:       #cffafe;
    --cyan-border:   #a5f3fc;
    --red:           #dc2626;
    --red-hover:     #b91c1c;
    --red-bg:        #fee2e2;
    --red-border:    #fecaca;
    --green-hover:   #15803d;
    --green-soft:    #22c55e;
    --green-bg:      #dcfce7;
    --green-border:  #bbf7d0;
    --green-text:    #166534;

    /* ===== Grid cells ===== */
    --cell-height: 50px;
    --cell-border: 2px;
    --thin-cell-border: 1px;

    /* ===== Typography ===== */
    --font-sm:   11px;
    --font-base: 12px;
    --font-md:   13px;
    --font-lg:   14px;
    --font-xl:   18px;

    /* ===== Appointment coloring ===== */
    --appt-color-0: #e0f7fa; /* Light cyan */
    --appt-color-1: #e8f5e9; /* Light green */
    --appt-color-2: #fce4ec; /* Light pink */
    --appt-color-3: #fff3e0; /* Light orange */

    --appt-header-0: #00acc1; /* Cyan */
    --appt-header-1: #43a047; /* Green */
    --appt-header-2: #d81b60; /* Pink */
    --appt-header-3: #fb8c00; /* Orange */

    /* ===== Border radii ===== */
    --br-sm: 4px;
    --br-md: 6px;
    --br-lg: 8px;
    --br-full: 9999px;
}