/**
 * Colors
 *
 * Sets default background/text colors on core elements and
 * provides utility classes for quick color application.
 *
 * Naming convention:
 *   .text-{token}    — color (text)
 *   .bg-{token}      — background-color
 *   .border-{token}  — border-color (combine with a border utility)
 *
 * All values reference variables defined in variables.css.
 */


/* =========================================================
   1. Element defaults
   ========================================================= */

body {
    background-color: var(--color-bg);
    color:            var(--color-text-dark);
}

/* Divi often resets these; reinforce sensible defaults */
input,
textarea,
select,
button {
    color: var(--color-text-dark);
}

/* Default border color for any element that draws a border */
*,
*::before,
*::after {
    border-color: var(--color-border);
}


/* =========================================================
   2. Text color utilities
   ========================================================= */

.text-primary   { color: var(--color-primary)    !important; }
.text-secondary { color: var(--color-secondary)  !important; }
.text-accent    { color: var(--color-accent)      !important; }
.text-dark      { color: var(--color-text-dark)   !important; }
.text-light     { color: var(--color-text-light)  !important; }
.text-muted     { color: var(--color-text-muted)  !important; }
.text-white     { color: var(--color-white)        !important; }
.text-success   { color: var(--color-success)     !important; }
.text-warning   { color: var(--color-warning)     !important; }
.text-error     { color: var(--color-error)       !important; }
.text-info      { color: var(--color-info)        !important; }


/* =========================================================
   3. Background color utilities
   ========================================================= */

.bg-primary   { background-color: var(--color-primary)   !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-accent    { background-color: var(--color-accent)    !important; }
.bg-surface   { background-color: var(--color-surface)   !important; }
.bg-white     { background-color: var(--color-white)      !important; }
.bg-success   { background-color: var(--color-success)   !important; }
.bg-warning   { background-color: var(--color-warning)   !important; }
.bg-error     { background-color: var(--color-error)     !important; }
.bg-info      { background-color: var(--color-info)      !important; }


/* =========================================================
   4. Border color utilities
   ========================================================= */

.border-primary   { border-color: var(--color-primary)   !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-accent    { border-color: var(--color-accent)    !important; }
.border-success   { border-color: var(--color-success)   !important; }
.border-warning   { border-color: var(--color-warning)   !important; }
.border-error     { border-color: var(--color-error)     !important; }
.border-default   { border-color: var(--color-border)    !important; }


/* =========================================================
   5. Combined convenience classes
   ========================================================= */

/* Dark card on primary color */
.card-primary {
    background-color: var(--color-primary);
    color:            var(--color-white);
    border-color:     var(--color-primary-hover);
}

/* Subtle surface card */
.card-surface {
    background-color: var(--color-surface);
    color:            var(--color-text-dark);
    border-color:     var(--color-border);
}