/* Design Tokens — single source of truth for repeated values */
:root {
    /* ── Core colors ── */
    --color-primary:            #E67300;
    --color-primary-dark:       #cc6600;
    --color-primary-light:      #FF8B28;
    --color-primary-hover:      #bb6004;
    --color-cream:              #FFEEDB;
    --color-white:              #fff;
    --color-black:              #000;

    /* ── Text ── */
    --color-text-dark:          #333;
    --color-text-medium:        #444;
    --color-text-muted:         #595959;
    --color-gray-dark:          #555;
    --color-gray-medium:        #999;
    --color-border:             #767676;
    --color-info:               #0000ff;

    /* ── Grays ── */
    --color-gray:               #808080;
    --color-gray-light:         #ccc;
    --color-gray-border:        #ddd;
    --color-gray-hover:         #e0e0e0;
    --color-gray-lighter:       #eee;
    --color-slider-track:       #d3d3d3;

    /* ── Backgrounds ── */
    --color-bg-subtle:          #f0f0f0;
    --color-bg-light:           #f8f9fa;
    --color-bg-faint:           #fafafa;

    /* ── Semantic status ── */
    --color-danger:             #c00;
    --color-danger-bright:      #ff4444;
    --color-success:            #04AA6D;
    --color-success-dark:       #060;

    /* ── Alert / notification system ── */
    --color-alert-warn-bg:      #fff3cd;
    --color-alert-warn-bd:      #ffc107;
    --color-alert-warn-tx:      #856404;
    --color-alert-ok-bg:        #d4edda;
    --color-alert-ok-bd:        #28a745;
    --color-alert-ok-tx:        #155724;
    --color-alert-err-bg:       #f8d7da;
    --color-alert-err-bd:       #f5c6cb;
    --color-alert-err-tx:       #721c24;

    /* ── UI feedback ── */
    --color-alert-success-bg:   #ccffcc;
    --color-alert-danger-bg:    #ffcccc;
    --color-star:               #fc0;
    --color-invite-action:      #ff9800;

    /* ── Confidence indicators ── */
    --color-indicator-default:  #0000FF;
    --color-indicator-exact:    #FF1700;
    --color-indicator-poor:     #FFF600;

    /* ── Shadows ── */
    --color-shadow-xxs:         rgba(0, 0, 0, 0.05);
    --color-shadow-xs-mid:      rgba(0, 0, 0, 0.15);
    --color-shadow-xs:          rgba(0, 0, 0, 0.1);
    --color-shadow-sm:          rgba(0, 0, 0, 0.2);
    --color-shadow:             rgba(0, 0, 0, 0.3);
    --color-shadow-lg:          rgba(0, 0, 0, 0.6);
    --color-shadow-olive:       rgba(100, 100, 0, 0.5);
    --color-primary-shadow:     rgba(230, 115, 0, 0.4);
    --color-primary-shadow-hvy: rgba(230, 115, 0, 0.9);
    --color-card-hover-shadow:  rgba(82, 76, 69, 0.4);
    --color-btn-glow:           rgba(102, 126, 234, 0.3);
    --color-skeleton:           rgba(130, 130, 130, 0.2);
    --color-white-fade:         rgba(255, 255, 255, 0.8);
    --color-text-shadow:        rgba(255, 255, 255, 0.5);

    /* ── Font families ── */
    --font-sans:   sans-serif;
    --font-serif:  serif;
    --font-system: system-ui;

    /* ── Border radii ── */
    --radius-sm:   3px;
    --radius-md:   5px;
    --radius-lg:   8px;

    /* ── Spacing ── */
    --space-xs:    0.25rem;
    --space-sm:    0.5rem;
    --space-md:    1rem;
    --space-lg:    1.5rem;
    --space-xl:    2rem;
}