/* ==========================================================
   RISING SONS AFRICA
   TYPOGRAPHY
========================================================== */


/* ==========================================================
   BODY
========================================================== */

body{

    font-family: var(--font-family);

    font-size: var(--font-size-md);

    font-weight: var(--font-normal);

    line-height: 1.7;

    color: var(--text);

    background: var(--background);

}


/* ==========================================================
   HEADINGS
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    color: var(--heading);

    font-weight: var(--font-bold);

    line-height: 1.2;

    margin-bottom: var(--space-4);

}


h1{

    font-size: var(--font-size-4xl);

}


h2{

    font-size: var(--font-size-3xl);

}


h3{

    font-size: var(--font-size-2xl);

}


h4{

    font-size: var(--font-size-xl);

}


h5{

    font-size: var(--font-size-lg);

}


h6{

    font-size: var(--font-size-md);

}


/* ==========================================================
   PARAGRAPHS
========================================================== */

p{

    color: var(--text-light);

    margin-bottom: var(--space-4);

    line-height: 1.8;

}


/* ==========================================================
   LINKS
========================================================== */

a{

    color: inherit;

    transition: var(--transition);

}


a:hover{

    color: var(--primary);

}


/* ==========================================================
   STRONG
========================================================== */

strong{

    font-weight: var(--font-semibold);

    color: var(--heading);

}


/* ==========================================================
   EMPHASIS
========================================================== */

em{

    font-style: italic;

}


/* ==========================================================
   SMALL
========================================================== */

small{

    font-size: var(--font-size-sm);

    color: var(--text-muted);

}


/* ==========================================================
   BLOCKQUOTE
========================================================== */

blockquote{

    margin: var(--space-6) 0;

    padding: var(--space-5);

    border-left: 5px solid var(--primary);

    background: var(--surface-alt);

    color: var(--text-light);

    font-style: italic;

}


/* ==========================================================
   CODE
========================================================== */

code{

    padding: 2px 6px;

    border-radius: var(--radius-sm);

    background: #f3f4f6;

    color: #d63384;

    font-family: Consolas,
                 Monaco,
                 monospace;

}


pre{

    padding: var(--space-5);

    border-radius: var(--radius-md);

    overflow-x: auto;

    background: #1f2937;

    color: #f8fafc;

}


pre code{

    padding: 0;

    background: transparent;

    color: inherit;

}


/* ==========================================================
   LISTS
========================================================== */

ul{

    margin-bottom: var(--space-5);

    padding-left: var(--space-5);

}


ol{

    margin-bottom: var(--space-5);

    padding-left: var(--space-5);

}


ul li{

    list-style: disc;

    margin-bottom: var(--space-2);

}


ol li{

    list-style: decimal;

    margin-bottom: var(--space-2);

}


/* ==========================================================
   HORIZONTAL RULE
========================================================== */

hr{

    height: 1px;

    background: var(--border);

    margin: var(--space-7) 0;

}


/* ==========================================================
   TEXT UTILITIES
========================================================== */

.text-primary{

    color: var(--primary) !important;

}


.text-secondary{

    color: var(--secondary) !important;

}


.text-success{

    color: var(--success) !important;

}


.text-warning{

    color: var(--warning) !important;

}


.text-danger{

    color: var(--danger) !important;

}


.text-info{

    color: var(--info) !important;

}


.text-muted{

    color: var(--text-muted) !important;

}


.text-light{

    color: var(--text-light) !important;

}


.text-dark{

    color: var(--heading) !important;

}


.text-white{

    color: var(--white) !important;

}


/* ==========================================================
   FONT WEIGHTS
========================================================== */

.fw-light{

    font-weight: var(--font-light);

}


.fw-normal{

    font-weight: var(--font-normal);

}


.fw-medium{

    font-weight: var(--font-medium);

}


.fw-semibold{

    font-weight: var(--font-semibold);

}


.fw-bold{

    font-weight: var(--font-bold);

}


/* ==========================================================
   TEXT ALIGNMENT
========================================================== */

.text-start{

    text-align: left;

}


.text-center{

    text-align: center;

}


.text-end{

    text-align: right;

}


/* ==========================================================
   TEXT TRANSFORM
========================================================== */

.text-uppercase{

    text-transform: uppercase;

}


.text-lowercase{

    text-transform: lowercase;

}


.text-capitalize{

    text-transform: capitalize;

}


/* ==========================================================
   TEXT DECORATION
========================================================== */

.text-decoration-none{

    text-decoration: none;

}


.text-decoration-underline{

    text-decoration: underline;

}