<h2 class="mb-4">Colour Palette</h2>
<div class="row mb-5">
    <div class="col-6">
        <h5>Basic Colors</h5>
        <div class="mb-3 p-3 bg-app-black text-white">--app-black</div>
        <div class="mb-3 p-3 bg-app-white text-dark">--app-white</div>
        <div class="mb-3 p-3 bg-app-dark text-white">--app-dark</div>
        <div class="mb-3 p-3 bg-app-light text-dark">--app-light</div>
    </div>
    <div class="col-6">
        <h5>Layer Colors</h5>
        <div class="mb-3 p-3 bg-app-layer-one text-dark">--app-layer-one</div>
        <div class="mb-3 p-3 bg-app-layer-two text-dark">--app-layer-two</div>
        <div class="mb-3 p-3 bg-app-layer-three text-white">--app-layer-three</div>
        <div class="mb-3 p-3 bg-app-layer-four text-dark">--app-layer-four</div>
        <div class="mb-3 p-3 bg-app-layer-five text-white">--app-layer-five</div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-4">
        <h5>Primary Colors</h5>
        <div class="mb-3 p-3 bg-app-primary text-white">--app-primary</div>
        <div class="mb-3 p-3 bg-app-primary-soft text-dark">--app-primary-soft</div>
        <div class="mb-3 p-3 bg-app-primary-dark text-white">--app-primary-dark</div>
    </div>
    <div class="col-4">
        <h5>Secondary Colors</h5>
        <div class="mb-3 p-3 bg-app-secondary text-white">--app-secondary</div>
        <div class="mb-3 p-3 bg-app-secondary-soft text-dark">--app-secondary-soft</div>
        <div class="mb-3 p-3 bg-app-secondary-dark text-white">--app-secondary-dark</div>
    </div>
    <div class="col-4">
        <h5>Accent Colors</h5>
        <div class="mb-3 p-3 bg-app-accent text-white">--app-accent</div>
        <div class="mb-3 p-3 bg-app-accent-soft text-dark">--app-accent-soft</div>
        <div class="mb-3 p-3 bg-app-accent-dark text-white">--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 text-white">--app-success</div>
        <div class="mb-3 p-3 bg-app-success-soft text-dark">--app-success-soft</div>
        <div class="mb-3 p-3 bg-app-success-dark text-white">--app-success-dark</div>
    </div>
    <div class="col-4">
        <h5>Warning Colors</h5>
        <div class="mb-3 p-3 bg-app-warning text-dark">--app-warning</div>
        <div class="mb-3 p-3 bg-app-warning-soft text-dark">--app-warning-soft</div>
        <div class="mb-3 p-3 bg-app-warning-dark text-white">--app-warning-dark</div>
    </div>
    <div class="col-4">
        <h5>Danger Colors</h5>
        <div class="mb-3 p-3 bg-app-danger text-white">--app-danger</div>
        <div class="mb-3 p-3 bg-app-danger-soft text-dark">--app-danger-soft</div>
        <div class="mb-3 p-3 bg-app-danger-dark text-white">--app-danger-dark</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-white">--app-side-navigation-bg-color</div>
        <div class="mb-3 p-3 bg-app-mobile-navigation text-white">--app-mobile-navigation-bg-color</div>
    </div>
</div>

<div class="row mb-5">
    <h5>Complete Color Palette</h5>
    <div class="d-flex flex-wrap">
        <!-- Basic Colors -->
        <div class="p-3 bg-app-black text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Black
        </div>
        <div class="p-3 bg-app-white text-dark" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">
            White
        </div>
        <div class="p-3 bg-app-dark text-white" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">
            Dark
        </div>
        <div class="p-3 bg-app-light text-dark" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">
            Light
        </div>

        <!-- Primary Colors -->
        <div class="p-3 bg-app-primary text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Primary
        </div>
        <div class="p-3 bg-app-primary-soft text-dark"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Primary Soft
        </div>
        <div class="p-3 bg-app-primary-dark text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Primary Dark
        </div>

        <!-- Secondary Colors -->
        <div class="p-3 bg-app-secondary text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Secondary
        </div>
        <div class="p-3 bg-app-secondary-soft text-dark"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Secondary Soft
        </div>
        <div class="p-3 bg-app-secondary-dark text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Secondary Dark
        </div>

        <!-- Accent Colors -->
        <div class="p-3 bg-app-accent text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Accent
        </div>
        <div class="p-3 bg-app-accent-soft text-dark"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Accent Soft
        </div>
        <div class="p-3 bg-app-accent-dark text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Accent Dark
        </div>

        <!-- Success Colors -->
        <div class="p-3 bg-app-success text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Success
        </div>
        <div class="p-3 bg-app-success-soft text-dark"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Success Soft
        </div>
        <div class="p-3 bg-app-success-dark text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Success Dark
        </div>

        <!-- Warning Colors -->
        <div class="p-3 bg-app-warning text-dark"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Warning
        </div>
        <div class="p-3 bg-app-warning-soft text-dark"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Warning Soft
        </div>
        <div class="p-3 bg-app-warning-dark text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Warning Dark
        </div>

        <!-- Danger Colors -->
        <div class="p-3 bg-app-danger text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Danger
        </div>
        <div class="p-3 bg-app-danger-soft text-dark"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Danger Soft
        </div>
        <div class="p-3 bg-app-danger-dark text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Danger Dark
        </div>

        <!-- Layer Colors -->
        <div class="p-3 bg-app-layer-one text-dark"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer One
        </div>
        <div class="p-3 bg-app-layer-two text-dark"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer Two
        </div>
        <div class="p-3 bg-app-layer-three text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer Three
        </div>
        <div class="p-3 bg-app-layer-four text-dark"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer Four
        </div>
        <div class="p-3 bg-app-layer-five text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer Five
        </div>

        <!-- Navigation Colors -->
        <div class="p-3 bg-app-side-navigation text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Side Nav
        </div>
        <div class="p-3 bg-app-mobile-navigation text-white"
             style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Mobile Nav
        </div>
    </div>
</div>