/** Global Theme
 * Design tokens, color system, typography, spacing, and base element styling
 */
:root {
    /* Base colors */
    --color-bg:                   #1f2428;
    --color-text:                 #eee;

    --theme-color:                #68bef8;
    --secondary-color:            #f2d297;

    /* Theme color variants */
    --color-mono-0:               color-mix(in srgb, var(--color-mono-min),  #000                10%);
    --theme-color-0:              color-mix(in srgb, var(--theme-color),     var(--color-bg)       97%);
    --secondary-color-0:          color-mix(in srgb, var(--secondary-color), var(--color-bg)       97%);

    --secondary-color-1:          color-mix(in srgb, var(--secondary-color), var(--color-mono-min) 90%);
    --secondary-color-2:          color-mix(in srgb, var(--secondary-color), var(--color-mono-min) 75%);
    --secondary-color-3:          color-mix(in srgb, var(--secondary-color), var(--color-mono-min) 55%);
    --secondary-color-4:          color-mix(in srgb, var(--secondary-color), var(--color-mono-min) 30%);
    --secondary-color-5:          color-mix(in srgb, var(--secondary-color), var(--color-mono-max) 30%);
    --secondary-color-6:          color-mix(in srgb, var(--secondary-color), var(--color-mono-max) 55%);
    --secondary-color-7:          color-mix(in srgb, var(--secondary-color), var(--color-mono-max) 75%);
    --secondary-color-8:          color-mix(in srgb, var(--secondary-color), var(--color-mono-max) 90%);

    /* Palette */
    --palette-color-1:            #54c09a;
    --palette-color-2:            #9561df;
    --palette-color-3:            #489ebb;
    --palette-color-4:            #c55d74;

    --palette-color-1-dark:       color-mix(in srgb, var(--palette-color-1), var(--color-mono-min) 50%);
    --palette-color-2-dark:       color-mix(in srgb, var(--palette-color-2), var(--color-mono-min) 50%);
    --palette-color-3-dark:       color-mix(in srgb, var(--palette-color-3), var(--color-mono-min) 50%);
    --palette-color-4-dark:       color-mix(in srgb, var(--palette-color-4), var(--color-mono-min) 50%);

    /* Semantic colors */
    --color-good:                 #47dd97;
    --color-important:            #d8dd47;
    --color-warning:              #e2ae47;
    --color-attention:            #e64848;

    --highlight-color:            var(--color-important);

    /* Links */
    --link-color:                 var(--theme-color);
    --link-color-hover:           var(--theme-color-5);
    --link-underline-color:       var(--theme-color-4);
    --link-underline-color-hover: var(--theme-color-6);

    /* Typography */
    --font-family:                system-ui, sans-serif;
    --font-family-mono:           "Source Code Pro", monospace;
    --font-size:                  18px;
    --font-size-mono:             1em;
    --line-height:                1.5;

    /* Layout */
    --border-color:               var(--color-mono-2);
    --border-radius:              0.5rem;
    --margin-block:               1.75rem;

    --content-max-width:          60rem;
    --content-margin-inline:      4%;
    --content-margin-block:       45px;

    --cover-bg-overlay:           var(--color-bg);
    --cover-title-color:          var(--strong-color);

    /* Effects */
    --box-shadow:                 0 0.3rem 0.8rem #0006;
    --box-shadow-small:           0 0.1rem 0.3rem #0006;

    /* Elements */
    --button-bg:                  var(--theme-color-3);
    --button-border-radius:       100vh;

    --kbd-bg:                     var(--color-mono-2);
    --kbd-color:                  var(--color-mono-8);

    --mark-bg:                    var(--color-important);
    --mark-color:                 var(--color-bg);

    --em-color:                   var(--secondary-color-6);
    --strong-color:               var(--theme-color-6);
    --strong-font-weight:         600;

    --table-head-row-bg:          var(--color-mono-2);
    --table-row-alt-bg:           var(--color-mono-1);

    color-scheme: dark;
}


/* Content section */
.markdown-section {
    margin: var(--content-margin-block) auto 0 auto;
    container-type: inline-size;

    /* Headings */
    :is(h1, h2, h3, h4, h5, h6) {
        text-wrap: balance;

        a:hover {
            text-decoration: none;
        }

        &:is(h2) {
            padding-bottom: 0.25em;
        }

        &:is(h1) {
            color: var(--theme-color);
        }

        &:is(h2, h4, h6) {
            color: var(--secondary-color);
        }

        &:is(h3, h5) {
            color: var(--theme-color-6);
        }
    }

    /* Paragraphs */
    p + p {
        margin-top: calc(0.5 * var(--margin-block));
    }

    p:has(+ p) {
        margin-bottom: calc(0.5 * var(--margin-block));
    }

    p:has(+ :is(ol, ul)) {
        margin-bottom: calc(0.5 * var(--margin-block));
    }

    /* Lists */
    ul {
        margin-bottom: var(--margin-block);
    }

    /* Images */
    img,
    figure {
        max-width: 100%;
        display: block;
        margin: var(--margin-block) auto;

        @container (min-width: 640px) {
            max-width: 90%;
        }
    }
}

/* Macintosh display images */
img[src*="macintosh"] {
    max-height: 10rem;
}

/* Text formatting */
em {
    color: var(--em-color);
}

/* Cover page */
.cover-main a.button.secondary {
    color: var(--color-text);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Force light mode for iframes */
iframe,
iframe *,
iframe[src],
iframe[src] * {
  color-scheme: light;
}