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

<div class="row mb-5">
    <div class="col-4">
        <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-4">
        <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 class="col-4">
        <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>

<div class="row mb-5">
    <div class="col-4">
        <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 class="col-4">
        <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-4">
        <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>

<div class="row mb-5">

<div class="row mb-5">
    <h5>Complete Color Palette</h5>
    <div class="d-flex flex-wrap">
        <!-- Primary Colors -->
        <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>

        <!-- Secondary Colors -->
        <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>

        <!-- Accent Colors -->
        <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>

        <!-- Success Colors -->
        <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>

        <!-- Warning Colors -->
        <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>

        <!-- Danger Colors -->
        <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>

        <!-- Layer Colors -->
        <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>

        <!-- Navigation Colors -->
        <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>

        <!-- Table Colors -->
        <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>
