/* ==========================================================
   ZYTRIX TYPOGRAPHY SYSTEM
   File: typography.css
   Project: wealth.hi-systems.africa
   Version: 0.1
   Philosophy:
   Institutional.
   Precise.
   Quiet.
   Computational.
==========================================================*/


/* ==========================================================
   TYPOGRAPHY TOKENS
==========================================================*/

:root{

    --font-primary:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-mono:
        "IBM Plex Mono",
        "JetBrains Mono",
        monospace;

}



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

body{

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

    font-size:16px;

    font-weight:400;

    line-height:1.75;

    color:var(--text);

    letter-spacing:-.01em;

}



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

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

    color:#ffffff;

    font-weight:800;

    letter-spacing:-.04em;

    line-height:1.08;

}



/* ==========================================================
   H1
==========================================================*/

h1{

    font-size:clamp(3.4rem,8vw,6rem);

}



/* ==========================================================
   H2
==========================================================*/

h2{

    font-size:clamp(2.4rem,6vw,4rem);

}



/* ==========================================================
   H3
==========================================================*/

h3{

    font-size:clamp(1.6rem,4vw,2.2rem);

}



/* ==========================================================
   H4
==========================================================*/

h4{

    font-size:1.35rem;

}



/* ==========================================================
   H5
==========================================================*/

h5{

    font-size:1.1rem;

}



/* ==========================================================
   H6
==========================================================*/

h6{

    font-size:.95rem;

    text-transform:uppercase;

    letter-spacing:.18em;

    color:var(--muted);

}



/* ==========================================================
   DISPLAY TITLES
==========================================================*/

.display{

    font-size:clamp(4rem,10vw,7rem);

    font-weight:900;

    line-height:1;

    letter-spacing:-.06em;

}



/* ==========================================================
   HERO TITLE
==========================================================*/

.hero-title{

    max-width:980px;

}



/* ==========================================================
   HERO SUBTITLE
==========================================================*/

.hero-subtitle{

    font-size:1.2rem;

    max-width:760px;

    color:var(--muted);

    margin-top:30px;

}



/* ==========================================================
   PARAGRAPH
==========================================================*/

p{

    font-size:1.05rem;

    color:var(--muted);

    max-width:760px;

}



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

.small{

    font-size:.88rem;

    color:var(--muted);

}



/* ==========================================================
   LEAD TEXT
==========================================================*/

.lead{

    font-size:1.35rem;

    line-height:1.9;

    color:#E5E7EB;

}



/* ==========================================================
   LABELS
==========================================================*/

label{

    font-size:.92rem;

    font-weight:600;

}



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

a{

    color:#ffffff;

    text-decoration:none;

}

a:hover{

    color:var(--green);

}



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

ul{

    list-style:none;

}

li{

    color:var(--muted);

    margin-bottom:12px;

}



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

strong{

    color:#ffffff;

    font-weight:700;

}

em{

    font-style:italic;

}



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

code{

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

    font-size:.92rem;

    color:var(--green);

}



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

blockquote{

    border-left:4px solid var(--green);

    padding-left:28px;

    color:#E5E7EB;

    font-size:1.25rem;

    line-height:1.8;

}



/* ==========================================================
   SECTION LABEL
==========================================================*/

.section-label{

    display:inline-block;

    text-transform:uppercase;

    letter-spacing:.22em;

    font-size:.8rem;

    color:var(--green);

    margin-bottom:18px;

}



/* ==========================================================
   CAPTION
==========================================================*/

.caption{

    font-size:.82rem;

    color:var(--muted);

}



/* ==========================================================
   METRIC
==========================================================*/

.metric-value{

    font-size:3rem;

    font-weight:900;

    color:#ffffff;

}

.metric-label{

    font-size:.95rem;

    color:var(--muted);

}



/* ==========================================================
   TABLE
==========================================================*/

.table th{

    font-size:.95rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    font-weight:700;

}

.table td{

    font-size:1rem;

}



/* ==========================================================
   FOOTER
==========================================================*/

.footer{

    font-size:.92rem;

}

.footer-title{

    font-size:1rem;

    font-weight:700;

    color:#ffffff;

    margin-bottom:18px;

}



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

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.text-muted{

    color:var(--muted);

}

.text-primary{

    color:#ffffff;

}

.text-success{

    color:var(--green);

}

.text-warning{

    color:var(--gold);

}

.text-danger{

    color:var(--danger);

}

.uppercase{

    text-transform:uppercase;

}

.capitalize{

    text-transform:capitalize;

}

.lowercase{

    text-transform:lowercase;

}

.w-300{

    font-weight:300;

}

.w-400{

    font-weight:400;

}

.w-500{

    font-weight:500;

}

.w-600{

    font-weight:600;

}

.w-700{

    font-weight:700;

}

.w-800{

    font-weight:800;

}

.w-900{

    font-weight:900;

}



/* ==========================================================
   TEXT SELECTION
==========================================================*/

::selection{

    background:var(--green);

    color:#04130A;

}