/* ─── Custom Properties ─────────────────────────── */

:root {
    /* ─── Colors ─────────────────────────────────── */
    --color-white-primary:    #faf9f5;
    --color-white-f1:         #f1f1f1;
    --color-white-e:          #eee;
    --color-white-e0:         #e0e0e0;
    --color-white-e0-95:      #e0e0e095;
    --color-white-e0-light:   #e0e0e060;
    --color-white-b0:         #b0b0b0;
    --color-white-c:          #ccc;
    --color-white-d:          #ddd;

    --color-black-primary:    #2c2c2c;
    --color-black-secondary:  #2a2a2a;

    --color-grey-3:           #333;
    --color-grey-4:           #444;
    --color-grey-5:           #555;
    --color-grey-6:           #666;
    --color-grey-7:           #777;
    --color-grey-8:           #888;
    --color-grey-c:           #ccc;

    --color-blue-deep:        #2c3e50;
    --color-blue-deep-light:  #2c3e5060;
    --color-blue-focus:       #4a90e2;
    --color-blue-focus-light: rgba(74, 144, 226, 0.2);

    --color-red:              #7c2929;
    --color-orange:           #ce643d;
    --color-orange-80:        #ce643d80;

    --color-text-primary:     hsl(49 19.6% 13.3%);
    --color-status-good:      #4caf50;
    --color-status-bad:       #f44336;

    /* ─── Spacing ─────────────────────────────────── */
    --spacing-small-border: 6px;
    --spacing-border:       10px;
    --spacing-small:        15px;
    --spacing-medium:       20px;
    --spacing-normal:       25px;
    --spacing-large:        30px;
    --spacing-gap:          0.5rem;

    /* ─── Border ──────────────────────────────────── */
    --border-thin:  1.5px;
    --border-thick: 2px;
}

/* ─── Custom Select Tokens ──────────────────────── */

.custom-select {
    /* Colors */
    --select-bg:                   var(--color-white-primary);
    --select-text-color:           var(--color-grey-3);
    --select-arrow-color:          var(--color-grey-6);
    --select-border-color:         rgba(0, 0, 0, 0.1);
    --select-hover-bg:             rgba(0, 0, 0, 0.05);
    --select-active-bg:            rgba(0, 0, 0, 0.1);
    --select-focus-border-color:   var(--color-blue-focus);
    --select-focus-shadow:         0 0 0 3px var(--color-blue-focus-light);
    --select-shadow:               0 2px 5px rgba(0, 0, 0, 0.1);
    --select-hover-shadow:         0 4px 10px rgba(0, 0, 0, 0.15);
    --select-scrollbar-track-color: rgba(0, 0, 0, 0.05);
    --select-scrollbar-thumb-color: rgba(0, 0, 0, 0.2);

    /* Typography */
    --select-font-size:    15px;
    --select-font-weight:  400;
    --select-line-height:  1.5;

    /* Spacing */
    --select-padding-vertical:   12px;
    --select-padding-horizontal: 16px;
    --select-border-radius:      10px;
    --select-scrollbar-width:    8px;

    /* Transitions */
    --select-transition-speed:  0.2s;
    --select-transition-timing: ease-in-out;

    /* Dropdown */
    --select-dropdown-max-height: 250px;
    --select-dropdown-z-index:    100;
}