/* ==========================================================================
   AI Narratives
   Typography System
   Version: 1.0

   Developed by
   Zytrix Core Systems Enterprise
   ========================================================================== */

/* ==========================================================================
   GOOGLE FONTS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   ROOT TYPOGRAPHY
   ========================================================================== */

:root{

    --font-heading:
    "IBM Plex Sans",
    sans-serif;

    --font-body:
    "Inter",
    sans-serif;

    --font-code:
    "IBM Plex Mono",
    monospace;

    --font-size-xs:12px;
    --font-size-sm:14px;
    --font-size-md:16px;
    --font-size-lg:18px;
    --font-size-xl:20px;
    --font-size-2xl:24px;
    --font-size-3xl:32px;
    --font-size-4xl:42px;
    --font-size-5xl:56px;

}

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

body{

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

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

    font-weight:400;

    line-height:1.8;

    color:#1F2937;

}

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

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

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

    font-weight:700;

    line-height:1.2;

    letter-spacing:-0.03em;

    color:#111827;

}

h1{

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

}

h2{

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

}

h3{

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

}

h4{

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

}

h5{

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

}

h6{

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

}

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

p{

    margin-bottom:22px;

    color:#374151;

}

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

a{

    color:#2563EB;

    text-decoration:none;

    transition:.25s;

}

a:hover{

    color:#1D4ED8;

}

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

ul,
ol{

    margin-left:25px;

    margin-bottom:25px;

}

li{

    margin-bottom:8px;

}

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

blockquote{

    margin:35px 0;

    padding:25px;

    border-left:5px solid #2563EB;

    background:#F8FAFC;

    font-style:italic;

}

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

code{

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

    background:#F3F4F6;

    padding:3px 6px;

    border-radius:6px;

    font-size:14px;

}

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

pre{

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

    background:#0F172A;

    color:#F8FAFC;

    padding:24px;

    border-radius:12px;

    overflow-x:auto;

    line-height:1.7;

}

pre code{

    background:none;

    padding:0;

    color:inherit;

}

/* ==========================================================================
   ARTICLE TYPOGRAPHY
   ========================================================================== */

.article-title{

    font-size:58px;

    font-weight:700;

    margin-bottom:25px;

}

.article-subtitle{

    font-size:24px;

    font-weight:400;

    color:#6B7280;

    margin-bottom:35px;

}

.article-meta{

    font-size:14px;

    color:#6B7280;

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.article-content{

    max-width:820px;

    margin:auto;

}

.article-content p{

    font-size:18px;

    line-height:1.9;

}

.article-content h2{

    margin-top:70px;

}

.article-content h3{

    margin-top:50px;

}

/* ==========================================================================
   TABLES
   ========================================================================== */

table{

    font-size:15px;

}

th{

    font-weight:700;

}

td{

    font-weight:400;

}

/* ==========================================================================
   CAPTIONS
   ========================================================================== */

figcaption{

    text-align:center;

    font-size:14px;

    color:#6B7280;

    margin-top:10px;

}

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

label{

    font-weight:600;

}

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

small{

    font-size:13px;

    color:#6B7280;

}

/* ==========================================================================
   RESEARCH BADGES
   ========================================================================== */

.badge{

    display:inline-block;

    padding:5px 12px;

    border-radius:999px;

    background:#E5E7EB;

    font-size:12px;

    font-weight:600;

    letter-spacing:.05em;

    text-transform:uppercase;

}

/* ==========================================================================
   PUBLICATION IDENTIFIERS
   ========================================================================== */

.publication-id{

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

    font-size:13px;

    color:#6B7280;

    letter-spacing:.08em;

}

/* ==========================================================================
   END
   ========================================================================== */