:root {
    /* -- Site -- */
    --site-bg: #000; /* Page background                       */

    --header-height: 50px;
    --header-text-color: #afafaf;
    --link-color: #ff9100;
    --link-color-hover: #ff9100d2;

    --code-color-bg: #333;
    --code-color-text: #ffffff;

    --footer-color-text: #eee;
    --footer-color-bg: #111;

    --main-section-color-bg: rgba(0,0,0,0);/*#555;*/

    --card-bg: #222;
    --card-header-bg: #444;
    --card-header-text: #fff;
    --card-border: #000;
    --card-header-border: #333;
    --card-corner-radius: 10px;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.07);




    /* Notifications */
    --color-success-bg:    #f0fdf4;
    --color-success-bdr:   #16a34a;
    --color-success-txt:   #14532d;

    --color-warn-bg:       #fef9c3;
    --color-warn-bdr:      #ca8a04;
    --color-warn-txt:      #713f12;

    --color-info-bg:       #dbeafe;
    --color-info-bdr:      #1d4ed8;
    --color-info-txt:      #1e3a8a;
}



/* -- Utility -------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { color: #fff; }

/* -- Headings -------------------- */
h1, h2, h3, h4, h5, h6 {
    color:        var(--header-text-color);
    margin:       1.25rem 0 0.5rem;
    line-height:  1.25;
    font-weight:  700;
}
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem;   }
h3 { font-size: 1.25rem;  }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem;     }
h6 { font-size: 0.875rem; }

/* -- Body -------------------- */
p   { margin: 0 0 1rem; }
hr  { border: none; border-top: 1px solid #333333; margin: 1.5rem 0; }

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

ul, ol       { margin: 0 0 1rem; padding-left: 1.5rem; }
li           { margin-bottom: 0.25rem; }

/* -- Code-------------------- */
code, kbd, samp {
    font-family:   var(--font-mono);
    font-size:     0.9em;
    background:    var(--code-color-bg);
    padding:       0.1em 0.35em;
    border-radius: 4px;
    color:         var(--code-color-text);
}
pre {
    font-family:   var(--font-mono);
    font-size:     0.85rem;
    background:    var(--code-color-bg);
    color:         var(--code-color-text);
    padding:       0.75rem 1rem;
    border-radius: 6px;
    overflow-x:    auto;
    margin:        0 0 1rem;
}
pre code { background: none; padding: 0; font-size: inherit; }

/* -- TekDek Cards -------------------- */

.td-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    padding: 16px; 
}

.td-card {
    background:    var(--card-bg);
    border:        1px solid var(--card-border);
    border-radius: var(--card-corner-radius);
    box-shadow:    var(--card-shadow);
    margin-bottom: 1.5rem;
    overflow:      hidden;
}

.td-card-header {
    padding:       0.65rem 1.25rem;
    background:    var(--card-header-bg);
    color: var(--card-header-text);
    border-bottom: 1px solid var(--card-header-border);
    font-weight:   800;
    font-size:     1.2rem;
    display:       flex;
    gap:           0.5rem;
    align-items:   center;
    flex-wrap:     wrap;
}
.td-card-body        { padding: 1rem 1.25rem; }