<h2 class="mb-4">Borders</h2>
<div class="row">
    <div class="col-6">
        <h5>Regular Borders</h5>
        <div class="mb-3 p-3 border border-app-primary">Primary Border</div>
        <div class="mb-3 p-3 border border-app-secondary">Secondary Border</div>
        <div class="mb-3 p-3 border border-app-success">Success Border</div>
        <div class="mb-3 p-3 border border-app-warning">Warning Border</div>
        <div class="mb-3 p-3 border border-app-danger">Danger Border</div>
        <div class="mb-3 p-3 border border-app-accent">Accent Border</div>
    </div>
    <div class="col-6">
        <h5>Soft Borders</h5>
        <div class="mb-3 p-3 border border-app-primary-soft">Primary Soft Border</div>
        <div class="mb-3 p-3 border border-app-secondary-soft">Secondary Soft Border</div>
        <div class="mb-3 p-3 border border-app-accent-soft">Accent Soft Border</div>
        <div class="mb-3 p-3 border border-app-warning-soft">Warning Soft Border</div>
        <div class="mb-3 p-3 border border-app-danger-soft">Danger Soft Border</div>
        <div class="mb-3 p-3 border border-app-light">Light Border</div>
    </div>
</div>
<div class="row mt-4">
    <div class="col-6">
        <h5>Dark Borders</h5>
        <div class="mb-3 p-3 border border-app-primary-dark">Primary Dark Border</div>
        <div class="mb-3 p-3 border border-app-secondary-dark">Secondary Dark Border</div>
        <div class="mb-3 p-3 border border-app-accent-dark">Accent Dark Border</div>
        <div class="mb-3 p-3 border border-app-warning-dark">Warning Dark Border</div>
        <div class="mb-3 p-3 border border-app-danger-dark">Danger Dark Border</div>
        <div class="mb-3 p-3 border border-app-dark">Dark Border</div>
    </div>
    <div class="col-6">
        <h5>Width & Radius</h5>
        <div class="mb-3 p-3 border border-2">Border Width 2</div>
        <div class="mb-3 p-3 border border-3">Border Width 3</div>
        <div class="mb-3 p-3 border rounded">Rounded Border</div>
    </div>
    <div class="col-6">
        <h5>Layer Borders</h5>
        <div class="mb-3 p-3 border border-app-layer-one">Layer One Border</div>
        <div class="mb-3 p-3 border border-app-layer-two">Layer Two Border</div>
        <div class="mb-3 p-3 border border-app-layer-three">Layer Three Border</div>
        <div class="mb-3 p-3 border border-app-layer-four">Layer Four Border</div>
    </div>
    <div class="col-6">
        <h5>Alternate Layer Borders</h5>
        <div class="mb-3 p-3 border border-app-alt-layer-one">Alt Layer One Border</div>
        <div class="mb-3 p-3 border border-app-alt-layer-two">Alt Layer Two Border</div>
        <div class="mb-3 p-3 border border-app-alt-layer-three">Alt Layer Three Border</div>
        <div class="mb-3 p-3 border border-app-alt-layer-four">Alt Layer Four Border</div>
    </div>
</div>
