/*
 * monospace.css - Readable Monospace Theme for Perl.gg
 * Font: Source Code Pro (ranked #1 for monospace body text readability)
 * Optimized settings for extended reading, not just code
 * All configurable values in :root - change once, applies everywhere
 */

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

/* ==========================================================================
   CONFIGURATION - Fluid Type Scale using clamp()
   Base: 19px→21px (10-15% larger for monospace), Scale ratio: 1.25 (Major Third)
   ========================================================================== */

:root {
    /* Fonts */
    --font-body: "Source Code Pro", "Consolas", "Monaco", monospace;
    --font-code: "Source Code Pro", "Consolas", "Monaco", monospace;

    /* Fluid Font Sizes - 10-15% larger for monospace readability */
    --text-base: clamp(1.1875rem, 1.14rem + 0.24vw, 1.3125rem);   /* 19px → 21px */
    --text-sm: clamp(0.95rem, 0.91rem + 0.18vw, 1.0625rem);       /* 15px → 17px */
    --text-lg: clamp(1.425rem, 1.33rem + 0.42vw, 1.64rem);        /* ~23px → 26px */
    --text-xl: clamp(1.71rem, 1.56rem + 0.65vw, 2.05rem);         /* ~27px → 33px */
    --text-2xl: clamp(2.05rem, 1.84rem + 0.95vw, 2.56rem);        /* ~33px → 41px */
    --text-3xl: clamp(2.46rem, 2.15rem + 1.38vw, 3.2rem);         /* ~39px → 51px */

    /* Line Heights - taller for monospace readability */
    --line-height-tight: 1.25;
    --line-height-snug: 1.4;
    --line-height-normal: 1.8;

    /* Spacing adjustments for monospace */
    --letter-spacing-heading: -0.03em;
    --word-spacing-heading: -0.1em;
    --word-spacing-body: -0.03em;

    /* Colors */
    --bg-color: #ffffff;
    --text-color: #212529;
    --text-muted: #6c757d;
    --link-color: #0000ee;
    --link-visited: #551a8b;
    --border-color: #000000;
    --code-bg: #f8f9fa;
    --select-text-bg-color: #B5D6FC;

    /* Code Block Shadow */
    --code-shadow-size: 10px;
    --code-border-width: 2px;

    /* Spacing */
    --content-max-width: 65ch;
    --content-padding: clamp(1rem, 5vw, 2.5rem);
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

html {
    font-size: 100%;  /* Respects user browser settings */
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    background: var(--bg-color);
    color: var(--text-color);
    padding: var(--content-padding);
    margin: 0 auto;
    max-width: var(--content-max-width);
    line-height: var(--line-height-normal);
    word-spacing: var(--word-spacing-body);
}

/* ==========================================================================
   Typography - Major Third Scale (1.25 ratio)
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    color: var(--text-color);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
    letter-spacing: var(--letter-spacing-heading);
    word-spacing: var(--word-spacing-heading);
}

h1 {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
    margin-top: 0;
}

h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
}

h3 {
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: var(--line-height-snug);
}

h4 {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: var(--line-height-snug);
}

h5, h6 {
    font-size: var(--text-base);
    font-weight: 700;
    line-height: var(--line-height-snug);
}

h6 {
    color: var(--text-muted);
}

p {
    margin: var(--space-md) 0;
    line-height: var(--line-height-normal);
}

strong {
    font-weight: 700;
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: var(--link-color);
    text-decoration: none;
}

a:visited {
    color: var(--link-visited);
}

a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Selection
   ========================================================================== */

::selection {
    background: var(--select-text-bg-color);
}

/* ==========================================================================
   Write Container
   ========================================================================== */

#write {
    margin: 0 auto;
    max-width: 100%;
}

/* ==========================================================================
   Horizontal Rule
   ========================================================================== */

hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--space-lg) 0;
}

/* ==========================================================================
   Lists
   ========================================================================== */

ul, ol {
    padding-left: 1.5em;
    margin: var(--space-md) 0;
}

li {
    margin: var(--space-sm) 0;
    line-height: var(--line-height-normal);
}

li p {
    margin: var(--space-sm) 0;
}

/* ==========================================================================
   Blockquotes
   ========================================================================== */

blockquote {
    border-left: 3px solid var(--border-color);
    padding: 0 var(--space-md);
    margin: var(--space-md) 0;
    color: var(--text-muted);
}

/* ==========================================================================
   Tables
   ========================================================================== */

table {
    font-family: var(--font-body);
    font-size: var(--text-base);
    border-collapse: collapse;
    width: 100%;
    margin: var(--space-md) 0;
    line-height: var(--line-height-normal);
}

thead tr {
    border-bottom: 1px solid var(--border-color);
}

thead th {
    text-align: left;
    padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
    font-weight: 700;
}

tbody td {
    padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
    line-height: var(--line-height-normal);
    border-bottom: 1px solid #dee2e6;
}

/* ==========================================================================
   Code and Preformatted Text
   ========================================================================== */

code, pre, samp, tt {
    font-family: var(--font-code);
}

code {
    background-color: var(--code-bg);
    padding: 0.15em 0.4em;
    font-size: var(--text-base);
    border-radius: 3px;
}

.md-fences {
    font-size: var(--text-base);
    display: block;
    background-color: var(--code-bg);
    border: var(--code-border-width) solid var(--border-color);
    box-shadow: var(--code-shadow-size) var(--code-shadow-size) 0 var(--border-color);
    margin: var(--space-lg) 0;
    overflow-x: auto;
    line-height: 1.5;
}

.CodeMirror {
    font-family: var(--font-code);
    background: var(--code-bg);
}

.CodeMirror-code {
    padding: var(--space-md) var(--space-lg);
}

/* CodeMirror Syntax Highlighting */
.cm-s-inner .cm-comment { color: #008000; }
.cm-s-inner .cm-keyword { color: #0000ff; }
.cm-s-inner .cm-meta { color: #0000ff; }
.cm-s-inner .cm-bracket { color: #000000; }
.cm-s-inner .cm-string { color: #a31515; }
.cm-s-inner .cm-number { color: #098658; }
.cm-s-inner .cm-variable { color: #000000; }
.cm-s-inner .cm-variable-2 { color: #0000ff; }
.cm-s-inner .cm-def { color: #000000; }
.cm-s-inner .cm-operator { color: #000000; }
.cm-s-inner .cm-property { color: #000000; }
.cm-s-inner .cm-atom { color: #0000ff; }
.cm-s-inner .cm-builtin { color: #0000ff; }
.cm-s-inner .cm-tag { color: #800000; }
.cm-s-inner .cm-attribute { color: #ff0000; }

/* ==========================================================================
   Images
   ========================================================================== */

img {
    max-width: 100%;
    border: 1px solid var(--border-color);
}

/* ==========================================================================
   Keyboard
   ========================================================================== */

kbd {
    font-family: var(--font-code);
    font-size: var(--text-base);
    padding: 0.15em 0.4em;
    background: var(--code-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

/* ==========================================================================
   Footer / Address
   ========================================================================== */

address {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-style: normal;
    color: var(--text-muted);
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
    line-height: var(--line-height-normal);
}

/* ==========================================================================
   Task Lists
   ========================================================================== */

.md-task-list-item {
    list-style-type: none;
}

.md-task-list-item > input {
    margin-left: -1.3em;
    margin-right: 0.5em;
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.md-alert {
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-md) 0;
    border-left: 3px solid var(--border-color);
    background: var(--code-bg);
    line-height: var(--line-height-normal);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    body {
        padding: 0;
        max-width: 100%;
    }

    .md-fences {
        border: 1px solid #000;
        box-shadow: none;
    }

    a {
        color: #000;
    }

    a:after {
        content: " (" attr(href) ")";
    }
}