:root {
    --primary: #FFBC52;
    --primaryLighter: #FFD699;
    --secondary: #47A9FF;
    --background: #001426;
    --backgroundLighter: #001B33;
    --backgroundDarker: #000C17;
    --foreground: #FFF5E6;
    --red: #F86262;
    --green: #1BC554;
    --blue: #47A9FF;
    --pink: #F2699E;
    --purple: #B469F2;
}

#mermaid-svg {
    /* Sequence diagrams */
    .actor {
        stroke: black;
    }
    .actor-man {
        >tspan {
            fill: var(--primary) !important;
            stroke: transparent !important;
        }
    }
    .sequenceNumber {
        fill: var(--background) !important;
    }
    
    /* Flowchart */
    .edgeLabel {
        color: var(--foreground) !important;
    }

    /* State diagrams */
    &.statediagram {
        fill: var(--primary);

        .label-container path {
            fill: transparent;
            stroke: var(--primary);
        }

        .nodeLabel {
            color: var(--primary);
        }

        .node.default {
            path {
                stroke: var(--primary);

                &:nth-child(2) {
                    stroke: var(--primary);
                    fill: var(--backgroundLighter);
                }
            }
            g g {
                display: none;
            }
        }
    }

    .statediagram-note {
        .label-container path {
            stroke-width: 0;
            color: var(--background) !important;
            fill: var(--purple) !important;
        }
    }
}