/*
 * tokens.css — design tokens (CSS custom properties) with defaults.
 *
 * These are the `:root` defaults. They are OVERRIDDEN per-tenant
 * via inline <style> in app.blade.php using $tenant->css_vars_decoded.
 *
 * WHY THIS FILE EXISTS:
 *   Multi-tenant platform — every domain has its own color palette.
 *   Files like components/button.css, core.css, pages/*.css must use
 *   var(--color-X) instead of hard-coded hex values, so a tenant's
 *   accent color actually takes effect.
 *
 * HOW TO USE:
 *   In any CSS rule: color: var(--color-accent);
 *   With fallback:   color: var(--color-accent, #B83A3A);
 *
 * CONVENTION:
 *   --color-*       — any color (hex or rgb)
 *   --color-*-rgb   — the same color as an RGB triple for use in rgba():
 *                     background: rgba(var(--color-accent-rgb), 0.3);
 *
 * Load order: AFTER reset.css, BEFORE utilities/core/components.
 */

:root {
    /* --- Brand / accent --- */
    --color-primary:            #B83A3A;
    --color-primary-hover:      #d94444;
    --color-accent:             #B83A3A;
    --color-accent-rgb:         184, 58, 58;

    /* --- Buttons --- */
    --color-btn-accent:         #e04545;
    --color-btn-accent-hover:   #d94444;
    --color-btn-accent-dark:    #8a2020;
    --color-btn-bg:             #272D40;

    /* --- Backgrounds --- */
    --color-bg-main:            #1b2030;
    --color-bg-sidebar:         #16213e;
    --color-bg-header:          #0f3460;
    --color-bg-card:            #181B27;
    --color-bg-dark1:           #1a0a0a;
    --color-bg-dark2:           #0d0505;

    /* --- UI --- */
    --color-border:             #2e3750;
    --color-ui-accent:          #9bccdb;
    --color-profile-border:     rgba(184, 58, 58, 0.26);

    /* --- Gradients --- */
    --color-gradient-1:         #f24e47;
    --color-gradient-2:         #f542b9;

    /* --- Misc --- */
    --base-color:               195, 163, 87;
    --header-height:            74px;
    --anim--hover-time:         400ms;
    --anim--hover-ease:         cubic-bezier(0.25, 1, 0.5, 1);
}