:root {
    /* ===== Base ===== */
    --body-color: #fefefe;

    --shadow-color: #070707;
    --shadow-color-rgb: 7, 7, 7;

    /* ===== Brand ===== */
    --primary-color: #7f00b1;
    --primary-color-rgb: 127, 0, 177;
    --primary-color-invert: #EEEEEE;
    --primary-color-invert-rgb: 238, 238, 238;

    --secondary-color: #f6f4ff;
    --secondary-color-rgb: 246, 244, 255;
    --secondary-color-invert: #1E1014;

    --success-color: #9f01dd;
    --success-color-rgb: 159, 1, 221;
    --success-color-invert: #f6f4ff;

    --info-color: #508ca4;
    --info-color-rgb: 80, 140, 164;
    --info-color-invert: #EEEEEE;

    --warning-color: #BB4430;
    --warning-color-rgb: 187, 68, 48;
    --warning-color-invert: #f6f4ff;

    --danger-color: #990033;
    --danger-color-rgb: 153, 0, 51;
    --danger-color-invert: #f6f4ff;

    --disabled-color: #78707b;
    --disabled-color-rgb: 120, 112, 123;
    --disabled-color-invert: #dfd1e4;

    /* ===== Surfaces (fondos) ===== */
    --surface-0: var(--body-color);
    /* body */
    --surface-1: #ffffff;
    /* cards / paneles */
    --surface-2: var(--secondary-color);
    /* barras suaves, headers secundarios */
    --surface-3: #f2ecff;
    /* resaltados sutiles */

    /* ===== Texto ===== */
    --text-strong: #1f1f1f;
    --text-default: #333333;
    --text-muted: #666666;
    --text-soft: #8a8a8a;
    --text-inverse: var(--primary-color-invert);

    /* ===== Bordes / Dividers ===== */
    --border-color: rgba(0, 0, 0, .12);
    --border-strong: rgba(0, 0, 0, .2);
    --divider-color: rgba(0, 0, 0, .08);

    /* ===== Inputs ===== */
    --input-bg: rgba(var(--primary-color-rgb), .04);
    --input-border: rgba(var(--primary-color-rgb), .15);
    --input-icon-bg: rgba(var(--primary-color-rgb), .10);
    --input-focus-ring: 0 0 0 .15rem rgba(var(--primary-color-rgb), .25);

    /* ===== Gradientes / efectos ===== */
    --brand-gradient: linear-gradient(90deg, #7f00b1 0%, #9a00e6 100%);

    /* ===== Elevation ===== */
    --elev-1: 0 8px 24px rgba(var(--shadow-color-rgb), .05);
    --elev-2: 0 10px 30px rgba(var(--shadow-color-rgb), .08);
}