epigraph-ar {
    /* default color palette*/
    --epigraph_black: #000000;
    --epigraph_white: #FFFFFF;
    --epigraph_sea-salt: #F8FBF6;
    --epigraph_dusk-500: #111B22;
    --epigraph_dusk-400: #223644;
    --epigraph_dusk-100: #335166;
    --epigraph_cloud: #DDE7EE;
    --epigraph_honeydew: #D0E0CB;
    --epigraph_honeydew-50: #F1F5EF;
    --epigraph_honeydew-100: #E2ECDF;
    --epigraph_honeydew-200: #C5D9BF;
    --epigraph_honeydew-400: #8BB37F;
    --epigraph_jet: #363636;
    --epigraph_jet-200: #CCCCCC;
    --epigraph_jet-300: #B3B3B3;
    --epigraph_jet-400: #999999;

    /* Progress Ring */
    --progress-ring-color: var(--epigraph_dusk-400);
    --progress-ring-radius: 183px;
    --progress-ring-thickness: 8px;

    /* Keyboard focus outline */
    --keyboard-focus-outline-width: 4px;
    --keyboard-focus-outline-style: dashed;
    --keyboard-focus-outline-color: var(--epigraph_dusk-500);
    
    /* AR button */

        /* button */
        --ar-button-text-color: var(--epigraph_dusk-400);
        --ar-button-hover-text-color: var(--epigraph_white);
        --ar-button-background-color: var(--epigraph_white);;
        --ar-button-hover-background-color: var(--epigraph_dusk-400);
        --ar-button-active-background-color: var(--epigraph_dusk-500);
        --ar-button-border-color: var(--epigraph_dusk-400);

        /* icon */
        --ar-icon-vector-1-color: var(--epigraph_dusk-100);
        --ar-icon-hover-vector-1-color: var(--epigraph_white);;
        --ar-icon-vector-2-color: var(--epigraph_dusk-400);
        --ar-icon-hover-vector-2-color: var(--epigraph_jet-200);
        --ar-icon-vector-3-color: var(--epigraph_dusk-500);
        --ar-icon-hover-vector-3-color: var(--epigraph_jet-300);
        --ar-icon-frame-color: var(--epigraph_dusk-400);
        --ar-icon-hover-frame-color: var(--epigraph_white);

    /* Qr Modal */

        /* close button */
        --qr-modal-close-button-stroke-color: var(--epigraph_jet);

        /* title */
        --qr-modal-title-color: var(--epigraph_black);

        /* instruction */
        --qr-modal-instruction-color: var(--epigraph_jet);

        /* requirement */
        --qr-modal-requirement-color: var(--epigraph_blue);

        /* done button */
        --qr-modal-done-button-text-color: var(--epigraph_blue);
        --qr-modal-done-button-hover-text-color: var(--epigraph_white);
        --qr-modal-done-button-background-color: var(--epigraph_white);
        --qr-modal-done-button-hover-background-color: var(--epigraph_blue);
        --qr-modal-done-button-active-background-color: var(--epigraph_dark-blue);
        --qr-modal-done-button-border-color: var(--epigraph_blue);

    /* Product Tour */

        /* side panel */
        --product-tour-background-color: var(--epigraph_white);
        --product-tour-dot-background-color: var(--epigraph_jet-300);
        --product-tour-current-dot-background-color: var(--epigraph_dusk-400);

        /* desktop close button */
        --product-tour-close-button-stroke-color: var(--epigraph_dusk-400);
        --product-tour-close-button-hover-stroke-color: var(--epigraph_white);
        --product-tour-close-button-fill-color: var(--epigraph_jet-300);
        --product-tour-close-button-hover-fill-color: var(--epigraph_dusk-400);

        /* mobile modal button */
        --mobile-product-tour-button-text-color: var(--epigraph_white);
        --mobile-product-tour-button-background-color: var(--epigraph_dusk-400);

        /* mobile close button */
        --model-viewer-mobile-close-button-stroke-color: var(--epigraph_jet-400);
        --model-viewer-mobile-close-button-outline-color: var(--epigraph_jet-300);

        /* hotspot button */
        --hotspot-button-border-color: var(--epigraph_dusk-400);
        --hotspot-button-background-color: var(--epigraph_white);
        --hotspot-button-focus-border-color: var(--epigraph_white);
        --hotspot-inner-circle-border-color: var(--epigraph_dusk-400);
        --hotspot-inner-circle-viewed-border-color: var(--epigraph_jet-400);
}