/* ───────────────────────────────────────────────
    TABLE OF CONTENTS
    1. Global Settings
    2. Primitive Tokens
        2.A. Color Palettes
        2.B. Typography Tokens
        2.C. Spacing Tokens
    3. CSS Variables - Design Tokens
        2.A. Spacing Scale
    4. Page Layout 
    5. Typography
    6. Responsive Settings
───────────────────────────────────────────────*/

/* ───────────────────────────────────────────────
Global Settings
───────────────────────────────────────────────*/
* {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html, body {
    overflow-x:  hidden;
    overflow-x:  clip;
    font-family: 'Raleway', sans-serif;
}

body {background-color: var(--page-bg);}

img {
    display:  block;
    max-width: 100%;
}

a {
    color:           inherit;
    text-decoration: none;
}

ol, ul {
    list-style: none;
}

:root {
    /* ───────────────────────────────────────────────
    Primitive Tokens > Color Palettes
    ───────────────────────────────────────────────*/
    /*Mine*/
    --page-bg:      #f8f8f9;
    --color-card-bg:rgba(255, 255, 255, 0.5);
    --code-bg:          #e7eff7;
    --code-border-subtle:    #cfdce9;

    --gradient-title: linear-gradient(90deg, #59a7f6 0%, #ae72f9 41.397%, #59a7f6 100%);

    /*Brand*/
    --mspbots-blue:#0c82ca;

    /*Text*/
    --dark-blue:     #0c2651;
    --text-body:     #606266;
    --text-tertiary: #909398;
    --text-code:     #3e5178;

    /*Generated*/
    --color-clipboard-bg:     #d7e2ed;
    --color-clipboard-border: #afc2d5;

    --gradient-icon-chip: linear-gradient(135.76deg, #00e0c9 6.8283%, #2c77ff 35.395%, #6d74ff 85.827%);

        /* ───────────────────────────────────────────────
    Primitive Tokens > Typography Token
    ───────────────────────────────────────────────*/
    --font-chapter:  'Audiowide', sans-serif;
    --font-body:     'Raleway', sans-serif;
    --font-subtitle: 'Dosis', sans-serif;
    --font-code:     'Space Mono', monospace;
    /*--font-mono:  for coding if ever I finally need it :)*/

    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-md:   1.125rem;   /* 18px */
    --text-lg:   1.3rem;     /* 21px */
    --text-xl:   1.5rem;     /* 24px */
    --text-2xl:  1.875rem;   /* 30px */
    --text-3xl:  2.3rem;     /* 38px */
    --text-4xl:  3rem;       /* 48px */

    --font-weight-light:    300;
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* ───────────────────────────────────────────────
    Primitive Tokens > Spacing Tokens
    ───────────────────────────────────────────────*/
    --space-0:  0px;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  32px;
    --space-8:  40px;
    --space-9:  48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;

    /* ───────────────────────────────────────────────
    Primitive Tokens > Border Radius
    ───────────────────────────────────────────────*/
    --radius-xxs: 0.375rem; /* 6px */
    --radius-xs:  0.5rem;   /* 8px */
    --radius-sm:  0.75rem;  /* 12px */
    --radius-md:  0.625rem; /* 10px */
    --radius-full: 9999px;
}

/* ───────────────────────────────────────────────
CSS Variables - Design Tokens
───────────────────────────────────────────────*/

/* ───────────────────────────────────────────────
Page Layout
───────────────────────────────────────────────*/
.container {
    max-width: none;
    margin:    0;
    padding:   40px 6%;
}

.page-layout {
    display:               grid;
    grid-template-columns: 331px 1fr;
    gap:                   70px;
    padding-top:           80px;
    padding-bottom:        160px;
    align-items:           start;
}

/* ───────────────────────────────────────────────
Typography
───────────────────────────────────────────────*/
.hero-title {
    font-family:             var(--font-body);
    font-weight:             var(--font-weight-bold);
    font-size:               var(--text-4xl);
    line-height:             47px;
    background:              var(--gradient-title);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    margin-bottom:           4px;
}

.hero-subtitle {
    font-family:    var(--font-subtitle);
    font-weight:    var(--font-weight-medium);
    font-size:      var(--text-xl);
    letter-spacing: 0.78px;
    text-transform: uppercase;
    color:          var(--text-tertiary);
}

.toc-chapter-title {
    font-family:    var(--font-chapter);
    font-weight:    var(--font-weight-bold);
    font-size:      var(--text-base);
    text-transform: uppercase;
    color:          var(--mspbots-blue);
}

.toc-links {
    display:        flex;
    flex-direction: column;
    gap:            8px;

    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size:   var(--text-base);
    line-height: 25px;
    color:       var(--text-body);
    transition:  color 0.15s ease, padding-left 0.15s ease;
}

.toc-link:hover {
    color: var(--mspbots-blue);
}

.toc-link.is-active {
    color:        var(--dark-blue);
    font-weight:  var(--font-weight-bold);
    padding-left: 4px;
}

.sec-subtitle {
    font-family: var(--font-chapter);
    font-size: var(--text-lg);
    color: var(--mspbots-blue);
    text-transform: uppercase;
    margin-bottom: 0px;
}

.text-block-title {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size:   var(--text-xl);
    line-height: 32px;
    color:       var(--dark-blue);
}

.code-label {
    font-weight: var(--font-weight-bold);
    color:       var(--dark-blue);
}

.copy-paste-code pre {
    font-family:   var(--font-code);
    font-weight:   var(--font-weight-regular);
    font-size:     var(--text-base);
    line-height:   25px;
    color:         var(--text-code);
    white-space:   pre-wrap;
    word-break:    break-word;
    text-align: left;
}

h1, h2, h3, h4 {
    color: var(--dark-blue);
}

h2 {
    font-size: var(--text-3xl);
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
}

p {
    color:       var(--text-body);
    font-size:   var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: 25px;
}

/* ───────────────────────────────────────────────
Responsive Settings
───────────────────────────────────────────────*/
@media screen and (min-width: 1920px) {}

/*Widescreen*/ /*xxl*/
@media screen and (min-width: 1440px) {}

/*Tablet LG START*/ /*lg*/
@media screen and (max-width: 992px) {
    .page-layout {
        grid-template-columns: 1fr;
        gap:                   48px;
        padding-top:           56px;
    }
}

/*Tablet*/ /*md*/
@media screen and (max-width: 768px) {
}

/*Mobile*/ /*sm*/
@media screen and (max-width: 567px) {
}