<h2 class="mb-4">Colour Palette</h2>

<div class="row mb-5">
    <div class="col-6">
        <h5>Primary Colors</h5>
        <div class="mb-3 p-3 bg-app-primary">--app-primary</div>
        <div class="mb-3 p-3 bg-app-primary-soft">--app-primary-soft</div>
        <div class="mb-3 p-3 bg-app-primary-dark">--app-primary-dark</div>
    </div>
    <div class="col-6">
        <h5>Secondary Colors</h5>
        <div class="mb-3 p-3 bg-app-secondary">--app-secondary</div>
        <div class="mb-3 p-3 bg-app-secondary-soft">--app-secondary-soft</div>
        <div class="mb-3 p-3 bg-app-secondary-dark">--app-secondary-dark</div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-6">
        <h5>Accent Colors</h5>
        <div class="mb-3 p-3 bg-app-accent">--app-accent</div>
        <div class="mb-3 p-3 bg-app-accent-soft">--app-accent-soft</div>
        <div class="mb-3 p-3 bg-app-accent-dark">--app-accent-dark</div>
    </div>
    <div class="col-6">
        <h5>Success Colors</h5>
        <div class="mb-3 p-3 bg-app-success">--app-success</div>
        <div class="mb-3 p-3 bg-app-success-soft">--app-success-soft</div>
        <div class="mb-3 p-3 bg-app-success-dark">--app-success-dark</div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-6">
        <h5>Warning Colors</h5>
        <div class="mb-3 p-3 bg-app-warning">--app-warning</div>
        <div class="mb-3 p-3 bg-app-warning-soft">--app-warning-soft</div>
        <div class="mb-3 p-3 bg-app-warning-dark">--app-warning-dark</div>
    </div>
    <div class="col-6">
        <h5>Danger Colors</h5>
        <div class="mb-3 p-3 bg-app-danger">--app-danger</div>
        <div class="mb-3 p-3 bg-app-danger-soft">--app-danger-soft</div>
        <div class="mb-3 p-3 bg-app-danger-dark">--app-danger-dark</div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-6">
        <h5>Layer Colors</h5>
        <div class="mb-3 p-3 bg-app-layer-one">--app-layer-one</div>
        <div class="mb-3 p-3 bg-app-layer-two">--app-layer-two</div>
        <div class="mb-3 p-3 bg-app-layer-three">--app-layer-three</div>
        <div class="mb-3 p-3 bg-app-layer-four">--app-layer-four</div>
    </div>
    <div class="col-6">
        <h5>Alternate Layer Colors</h5>
        <div class="mb-3 p-3 bg-app-alt-layer-one">--app-alt-layer-one</div>
        <div class="mb-3 p-3 bg-app-alt-layer-two">--app-alt-layer-two</div>
        <div class="mb-3 p-3 bg-app-alt-layer-three">--app-alt-layer-three</div>
        <div class="mb-3 p-3 bg-app-alt-layer-four">--app-alt-layer-four</div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-6">
        <h5>Navigation Colors</h5>
        <div class="mb-3 p-3 bg-app-side-navigation text-app-side-navigation">--app-side-navigation-bg-color</div>
        <div class="mb-3 p-3 bg-app-top-navigation text-app-top-navigation">--app-top-navigation-bg-color</div>
        <div class="mb-3 p-3 bg-app-footer text-app-footer">--app-footer-bg-color</div>
    </div>
    <div class="col-6">
        <h5>Table Colors</h5>
        <div class="mb-3 p-3 bg-app-table-row text-app-table-row">--app-table-row-color</div>
        <div class="mb-3 p-3 bg-app-table-row-alt text-app-default-alt-text-color">--app-table-row-alt-color</div>
    </div>
</div>

<h2 class="mb-4 mt-5">Background Opacity Classes</h2>

<div class="row mb-5">
    <div class="col-12">
        <h5>Primary Opacity</h5>
        <div class="d-flex align-items-center mb-3">
            <div class="p-3 bg-app-primary-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
            <div class="p-3 bg-app-primary-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
            <div class="p-3 bg-app-primary-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
            <div class="p-3 bg-app-primary-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
            <div class="p-3 bg-app-primary-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
            <div class="p-3 bg-app-primary me-2" style="width: 80px; height: 60px;">100%</div>
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <h5>Secondary Opacity</h5>
        <div class="d-flex align-items-center mb-3">
            <div class="p-3 bg-app-secondary-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
            <div class="p-3 bg-app-secondary-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
            <div class="p-3 bg-app-secondary-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
            <div class="p-3 bg-app-secondary-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
            <div class="p-3 bg-app-secondary-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
            <div class="p-3 bg-app-secondary me-2" style="width: 80px; height: 60px;">100%</div>
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <h5>Accent Opacity</h5>
        <div class="d-flex align-items-center mb-3">
            <div class="p-3 bg-app-accent-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
            <div class="p-3 bg-app-accent-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
            <div class="p-3 bg-app-accent-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
            <div class="p-3 bg-app-accent-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
            <div class="p-3 bg-app-accent-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
            <div class="p-3 bg-app-accent me-2" style="width: 80px; height: 60px;">100%</div>
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <h5>Success Opacity</h5>
        <div class="d-flex align-items-center mb-3">
            <div class="p-3 bg-app-success-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
            <div class="p-3 bg-app-success-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
            <div class="p-3 bg-app-success-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
            <div class="p-3 bg-app-success-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
            <div class="p-3 bg-app-success-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
            <div class="p-3 bg-app-success me-2" style="width: 80px; height: 60px;">100%</div>
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <h5>Warning Opacity</h5>
        <div class="d-flex align-items-center mb-3">
            <div class="p-3 bg-app-warning-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
            <div class="p-3 bg-app-warning-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
            <div class="p-3 bg-app-warning-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
            <div class="p-3 bg-app-warning-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
            <div class="p-3 bg-app-warning-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
            <div class="p-3 bg-app-warning me-2" style="width: 80px; height: 60px;">100%</div>
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <h5>Danger Opacity</h5>
        <div class="d-flex align-items-center mb-3">
            <div class="p-3 bg-app-danger-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
            <div class="p-3 bg-app-danger-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
            <div class="p-3 bg-app-danger-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
            <div class="p-3 bg-app-danger-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
            <div class="p-3 bg-app-danger-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
            <div class="p-3 bg-app-danger me-2" style="width: 80px; height: 60px;">100%</div>
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <h5>Layer One Opacity</h5>
        <div class="d-flex align-items-center mb-3">
            <div class="p-3 bg-app-layer-one-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
            <div class="p-3 bg-app-layer-one-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
            <div class="p-3 bg-app-layer-one-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
            <div class="p-3 bg-app-layer-one-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
            <div class="p-3 bg-app-layer-one-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
            <div class="p-3 bg-app-layer-one me-2" style="width: 80px; height: 60px;">100%</div>
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <h5>Layer Two Opacity</h5>
        <div class="d-flex align-items-center mb-3">
            <div class="p-3 bg-app-layer-two-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
            <div class="p-3 bg-app-layer-two-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
            <div class="p-3 bg-app-layer-two-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
            <div class="p-3 bg-app-layer-two-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
            <div class="p-3 bg-app-layer-two-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
            <div class="p-3 bg-app-layer-two me-2" style="width: 80px; height: 60px;">100%</div>
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <h5>Layer Three Opacity</h5>
        <div class="d-flex align-items-center mb-3">
            <div class="p-3 bg-app-layer-three-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
            <div class="p-3 bg-app-layer-three-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
            <div class="p-3 bg-app-layer-three-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
            <div class="p-3 bg-app-layer-three-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
            <div class="p-3 bg-app-layer-three-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
            <div class="p-3 bg-app-layer-three me-2" style="width: 80px; height: 60px;">100%</div>
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <h5>Layer Four Opacity</h5>
        <div class="d-flex align-items-center mb-3">
            <div class="p-3 bg-app-layer-four-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
            <div class="p-3 bg-app-layer-four-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
            <div class="p-3 bg-app-layer-four-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
            <div class="p-3 bg-app-layer-four-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
            <div class="p-3 bg-app-layer-four-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
            <div class="p-3 bg-app-layer-four me-2" style="width: 80px; height: 60px;">100%</div>
        </div>
    </div>
</div>

<h2 class="mb-4 mt-5">Text Opacity Classes</h2>

<div class="row mb-5">
    <div class="col-12">
        <h5>Primary Text Opacity</h5>
        <div class="mb-3">
            <span class="text-app-primary-opacity-10 me-3">10% Opacity</span>
            <span class="text-app-primary-opacity-25 me-3">25% Opacity</span>
            <span class="text-app-primary-opacity-50 me-3">50% Opacity</span>
            <span class="text-app-primary-opacity-75 me-3">75% Opacity</span>
            <span class="text-app-primary-opacity-90 me-3">90% Opacity</span>
            <span class="text-app-primary me-3">100% Opacity</span>
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <h5>Secondary Text Opacity</h5>
        <div class="mb-3">
            <span class="text-app-secondary-opacity-10 me-3">10% Opacity</span>
            <span class="text-app-secondary-opacity-25 me-3">25% Opacity</span>
            <span class="text-app-secondary-opacity-50 me-3">50% Opacity</span>
            <span class="text-app-secondary-opacity-75 me-3">75% Opacity</span>
            <span class="text-app-secondary-opacity-90 me-3">90% Opacity</span>
            <span class="text-app-secondary me-3">100% Opacity</span>
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <h5>Accent Text Opacity</h5>
        <div class="mb-3">
            <span class="text-app-accent-opacity-10 me-3">10% Opacity</span>
            <span class="text-app-accent-opacity-25 me-3">25% Opacity</span>
            <span class="text-app-accent-opacity-50 me-3">50% Opacity</span>
            <span class="text-app-accent-opacity-75 me-3">75% Opacity</span>
            <span class="text-app-accent-opacity-90 me-3">90% Opacity</span>
            <span class="text-app-accent me-3">100% Opacity</span>
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <h5>Success Text Opacity</h5>
        <div class="mb-3">
            <span class="text-app-success-opacity-10 me-3">10% Opacity</span>
            <span class="text-app-success-opacity-25 me-3">25% Opacity</span>
            <span class="text-app-success-opacity-50 me-3">50% Opacity</span>
            <span class="text-app-success-opacity-75 me-3">75% Opacity</span>
            <span class="text-app-success-opacity-90 me-3">90% Opacity</span>
            <span class="text-app-success me-3">100% Opacity</span>
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <h5>Warning Text Opacity</h5>
        <div class="mb-3">
            <span class="text-app-warning-opacity-10 me-3">10% Opacity</span>
            <span class="text-app-warning-opacity-25 me-3">25% Opacity</span>
            <span class="text-app-warning-opacity-50 me-3">50% Opacity</span>
            <span class="text-app-warning-opacity-75 me-3">75% Opacity</span>
            <span class="text-app-warning-opacity-90 me-3">90% Opacity</span>
            <span class="text-app-warning me-3">100% Opacity</span>
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <h5>Danger Text Opacity</h5>
        <div class="mb-3">
            <span class="text-app-danger-opacity-10 me-3">10% Opacity</span>
            <span class="text-app-danger-opacity-25 me-3">25% Opacity</span>
            <span class="text-app-danger-opacity-50 me-3">50% Opacity</span>
            <span class="text-app-danger-opacity-75 me-3">75% Opacity</span>
            <span class="text-app-danger-opacity-90 me-3">90% Opacity</span>
            <span class="text-app-danger me-3">100% Opacity</span>
        </div>
    </div>
</div>

<div class="row mb-5">
    <h5>Complete Color Palette</h5>
    <div class="d-flex flex-wrap">
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-primary" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Primary</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-primary-soft" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Primary Soft</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-primary-dark" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Primary Dark</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-secondary" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Secondary</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-secondary-soft" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Secondary Soft</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-secondary-dark" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Secondary Dark</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-accent" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Accent</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-accent-soft" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Accent Soft</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-accent-dark" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Accent Dark</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-success" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Success</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-success-soft" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Success Soft</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-success-dark" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Success Dark</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-warning" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Warning</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-warning-soft" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Warning Soft</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-warning-dark" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Warning Dark</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-danger" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Danger</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-danger-soft" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Danger Soft</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-danger-dark" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Danger Dark</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-layer-one" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer One</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-layer-two" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer Two</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-layer-three" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer Three</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-layer-four" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer Four</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-alt-layer-one" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Alt Layer One</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-alt-layer-two" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Alt Layer Two</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-alt-layer-three" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Alt Layer Three</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-alt-layer-four" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Alt Layer Four</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-side-navigation text-app-side-navigation" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Side Nav</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-top-navigation text-app-top-navigation" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Top Nav</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-footer text-app-footer" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Footer</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-table-row text-app-table-row" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Table Row</div>
        <div class="p-3 d-flex align-items-center justify-content-center bg-app-table-row-alt text-app-table-row-alt" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Table Row Alt</div>
    </div>
</div>
