@media screen and (min-width: 981px) {

    /* typography tokens */
    #cbcn-dom-container {
        /* PC */
        /* number */
        --semantic-font-size-head-0: 4.85em;
        --semantic-font-line-height-head-0: 119.588%;

        --semantic-font-size-head-1: 3.55em;
        --semantic-font-line-height-head-1: 119.718%;

        --semantic-font-size-head-2: 2.9em;
        --semantic-font-line-height-head-2: 118.966%;

        --semantic-font-size-subhead: 1.4em;
        --semantic-font-line-height-subhead: 117.857%;

        --semantic-font-size-highlight-1: 3.55em;
        --semantic-font-line-height-highlight-1: 129.577%;

        --semantic-font-size-highlight-2: 2.85em;
        --semantic-font-line-height-highlight-2: 129.825%;

        --semantic-font-size-highlight-3: 2.1em;
        --semantic-font-line-height-highlight-3: 128.571%;

        --semantic-font-size-highlight-4: 1.8em;
        --semantic-font-line-height-highlight-4: 127.778%;

        --semantic-font-size-highlight-5: 1.4em;
        --semantic-font-line-height-highlight-5: 128.571%;

        --semantic-font-size-highlight-6: 1.25em;
        --semantic-font-line-height-highlight-6: 128%;

        --semantic-font-size-body-1: 1.05em;
        --semantic-font-size-body-2: 0.95em;
        --semantic-font-size-body-3: 0.85em;
        --semantic-font-size-body-4: 0.75em;
        --semantic-font-size-body-5: 0.6em;
        --semantic-font-size-footnote-1: 0.65em;
        --semantic-font-size-footnote-2: 0.55em;

        --semantic-font-line-height-body-1: 147.619%;
        --semantic-font-line-height-body-2: 147.368%;
        --semantic-font-line-height-body-3: 147.059%;
        --semantic-font-line-height-body-4: 146.667%;
        --semantic-font-line-height-body-5: 150%;
        --semantic-font-line-height-footnote-1: 153.846%;
        --semantic-font-line-height-footnote-2: 154.545%;

        --title-gap-1: 2.4em;
        --title-gap-2: 1em;
        --title-gap-3: 1.2em;
        --title-gap-4: 0.6em;
    }
}


@media screen and (max-width: 980px) {

    /* typography tokens */
    #cbcn-dom-container {
        --semantic-font-size-head-0: 1.8em;
        --semantic-font-line-height-head-0: 119.444%;

        --semantic-font-size-head-1: 1.8em;
        --semantic-font-line-height-head-1: 119.444%;

        --semantic-font-size-head-2: 1.8em;
        --semantic-font-line-height-head-2: 119.444%;

        --semantic-font-size-subhead: 0.95em;
        --semantic-font-line-height-subhead: 115.789%;

        --semantic-font-size-highlight-1: 1.8em;
        --semantic-font-line-height-highlight-1: 127.778%;

        --semantic-font-size-highlight-2: 1.8em;
        --semantic-font-line-height-highlight-2: 127.778%;

        --semantic-font-size-highlight-3: 1.4em;
        --semantic-font-line-height-highlight-3: 128.571%;

        --semantic-font-size-highlight-4: 1.25em;
        --semantic-font-line-height-highlight-4: 128%;

        --semantic-font-size-highlight-5: 1.05em;
        --semantic-font-line-height-highlight-5: 128.571%;

        --semantic-font-size-highlight-6: 1.05em;
        --semantic-font-line-height-highlight-6: 152.381%;

        --semantic-font-size-body-1: 0.85em;
        --semantic-font-size-body-2: 0.85em;
        --semantic-font-size-body-3: 0.75em;
        --semantic-font-size-body-4: 0.6em;
        --semantic-font-size-body-5: 0.6em;
        --semantic-font-size-footnote-1: 0.65em;
        --semantic-font-size-footnote-2: 0.55em;

        --semantic-font-line-height-body-1: 147.059%;
        --semantic-font-line-height-body-2: 147.059%;
        --semantic-font-line-height-body-3: 140%;
        --semantic-font-line-height-body-4: 150%;
        --semantic-font-line-height-body-5: 150%;
        --semantic-font-line-height-footnote-1: 153.846%;
        --semantic-font-line-height-footnote-2: 154.545%;

        --title-gap-1: 1.6em;
        --title-gap-2: 1.6em;
        --title-gap-3: 0.8em;
        --title-gap-4: 0.2em;
    }
}

/* color tokens */
#cbcn-dom-container .wt {
    /* light */
    /* color */
    /* 常用 */
    --text-93a: #1D1D1F;
    --text-69a: #6E6E73;
    --text-32a: #A1A1A6;

    /* 其他 */
    --text-91a: #000000E8;
    --text-04a: #0000000a;
    --text-08a: #0000000F;
    --text-12a: #0000001F;
    --text-15a: #00000026;
    --text-46a: #00000075;
    --text-54a: #0000008A;
    --text-86a: #000000DB;
    --text-89a: #000000E3;
    --text-invert-93a: #FFFFFFF5;

    --highlight-text-line: rgba(0, 0, 0, 0.46);
}

#cbcn-dom-container .bk {
    /* dark */
    /* color */
    /* 常用 */
    --text-93a: #F5F5F7;
    --text-69a: #A1A1A6;
    --text-32a: #6E6E73;

    /* 其他 */
    --text-04a: #FFFFFF12;
    --text-08a: #FFFFFF17;
    --text-12a: #FFFFFF1C;
    --text-15a: #FFFFFF24;
    --text-46a: #FFFFFF75;
    --text-54a: #FFFFFF8A;
    --text-86a: #FFFFFFD9;
    --text-89a: #FFFFFFE0;
    --text-91a: #FFFFFFEB;
    --text-invert-93a: #000000ED;

    --highlight-text-line: rgba(255, 255, 255, 0.46);
}