<h2 class="mb-4">Typography</h2>

<div class="row mb-5">
    <div class="col-6">
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </div>
    <div class="col-6">
        <div class="fs-1">Font Size 1</div>
        <div class="fs-2">Font Size 2</div>
        <div class="fs-3">Font Size 3</div>
        <div class="fs-4">Font Size 4</div>
        <div class="fs-5">Font Size 5</div>
        <div class="fs-6">Font Size 6</div>
        <div class="fs-0">Font Size 0 (base)</div>
        <div class="fs--1">Font Size --1 (small)</div>
        <div class="fs--2">Font Size --2 (smaller)</div>
        <a href="#">Hyper Link</a>
    </div>
</div>

<div class="row mb-4">
    <div class="col-6">
        <div class="text-app-primary">Text App Primary</div>
        <div class="text-app-primary-soft">Text App Primary Soft</div>
        <div class="text-app-primary-dark">Text App Primary Dark</div>
    </div>
    <div class="col-6">
        <div class="text-app-secondary">Text App Secondary</div>
        <div class="text-app-secondary-soft">Text App Secondary Soft</div>
        <div class="text-app-secondary-dark">Text App Secondary Dark</div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-6">
        <div class="text-app-accent">Text App Accent</div>
        <div class="text-app-accent-soft">Text App Accent Soft</div>
        <div class="text-app-accent-dark">Text App Accent Dark</div>
    </div>
    <div class="col-6">
        <div class="text-app-success">Text App Success</div>
        <div class="text-app-success-soft">Text App Success Soft</div>
        <div class="text-app-success-dark">Text App Success Dark</div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-6">
        <div class="text-app-warning">Text App Warning</div>
        <div class="text-app-warning-soft">Text App Warning Soft</div>
        <div class="text-app-warning-dark">Text App Warning Dark</div>
    </div>
    <div class="col-6">
        <div class="text-app-danger">Text App Danger</div>
        <div class="text-app-danger-soft">Text App Danger Soft</div>
        <div class="text-app-danger-dark">Text App Danger Dark</div>
    </div>
</div>

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

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

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

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

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

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

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