test.css

/* .: Q-WIND :. TEST like NIKE and Just --Q IT! */
/* (RE)MOVE --q and .: Q-WIND :. STOPS WORKING... */
:root {
    /* STRATEGY  |  CREATE */
    --q: ;
    --\_brand: #22face;
    --\/_brand: #22cafe;
    --\/\/_brand: #fa22ce;
    --\/\/\/_brand: #face22;

    --\_test: currentColor;
    --\/_test: red;
    --\/\/_test: limegreen;
    --\/\/\/_test: blue;
}

/*  __STRUCTURE  |  __READ */
.q__brand {
    --_q: var(--_brand, black);
    border-color: var(--_q);
    --q: var(var(--_q));
    accent-color: var(--q);
    --q-key-1: var(--\_brand);
    --q-key-2: var(--\/_brand);
    --q-key-3: var(--\/\/_brand);
    --q-key-4: var(--\/\/\/_brand);
    --q-key-5: var(--\_brand);
}
.q__test {
    --_q: var(--_test, red);
    border-color: var(--_q);
    --q: var(--_q);
    accent-color: var(--q);
    --q-key-1: var(--\_test);
    --q-key-2: var(--\/_test);
    --q-key-3: var(--\/\/_test);
    --q-key-4: var(--\/\/\/_test);
    --q-key-5: var(--\_test);
}

.q__default {
    --_q: currentColor, var(--q), rebeccapurple;
    border-color: var(--_q);
    --q: var(--_q);
}

/*  --SURFACE  |  --READ */
.q--txt, .q--text {
    color: var(--q);
}
.q--debug:not(div)::before,
.q--debug:is(div)::after {
    content: "Q:."attr(data-q);
    color: var(--\/_test);
    font-size: clamp(0.775em, 5vh, 15px);
    text-decoration: line-through;
    text-decoration-color: black;
    z-index: 99;
    isolation: isolate;
}
.q--border {
    border-width: max-content;
    border-color: currentColor;
}
:where(.q--animate) {
    border-width: 1vmin !important;
    border-image: conic-gradient(from var(--angle), var(--q-key-1), var(--q-key-1), var(--q-key-2), var(--q-key-2), var(--q-key-3), var(--q-key-3), var(--q-key-3), var(--q-key-4), var(--q-key-5), var(--q-key-5)) 1;
    animation: 10s rotate linear infinite;
}
.q--bg {
    background-color: var(--q);
    background: var(--q);
}
.q--fg {
    fill: var(--q);
    stroke: 0.5vmin solid var(--q);
}

/*  SKELETON  |  SHRINK  |  UPDATE */
:is(.q__test, .q--border):not(.q__brand) {
    border-color: currentColor;
    border-style: dashed;
}
:is(.q--border):not(.q__test) {
    border-color: currentColor;
    border-style: solid;
}
:is(.q--see-txt, .q--see-text):not(.q--less) {
    --_q: white;  
    color: var(--_q) !important;
    background-color: var(--q);
}

/*  SCOPE  |  HIDE  |  DELETE */
:is(.q--borderless) {
    border-width: 0px !important;
}
:is(.q--textless, .q--txtless) {
    color: transparent !important;
}
:where(.q--less) {
    --q: revert !important;
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}
/*  STRATEGY  |  EMBOSS  |  UPDATE */
@property --q {
    syntax: '<color>';
    initial-value: unset;
    inherits: true;
}

/* POWERED BY: https://bram.us/2021/01/29/animating-a-css-gradient-border */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Powered By: .: https://justgu.us :.  The tiniest "Dutch Design System" agency inside a human body. 
/* --Questions? .: https://askgu.us :. or .: https://followgu.us :. for more Guus! */