/*
 * travis.systems dark theme for Bootstrap 5
 *
 * Usage: load after Bootstrap CSS, before your page-specific stylesheet.
 *
 *   <link href="bootstrap.min.css" rel="stylesheet">
 *   <link href="theme.css" rel="stylesheet">
 *   <link href="site.css" rel="stylesheet">        (optional, page-specific)
 *
 * Override any variable in :root to retheme without touching this file.
 */

/* ── Color palette ───────────────────────────────────────────────────────── */
:root {
    --ts-bg:              #0f1117;
    --ts-bg-card:         #141924;
    --ts-bg-surface:      #1e2535;
    --ts-bg-footer:       #0a0d13;
    --ts-bg-hero-mid:     #1a2035;
    --ts-bg-badge:        #1e2535;
    --ts-bg-badge-active: #1a2a4a;

    --ts-accent:          #58a6ff;
    --ts-accent-border:   #2d4a7a;
    --ts-accent-hover:    #58a6ff44;

    --ts-text:            #e2e8f0;
    --ts-text-heading:    #f1f5f9;
    --ts-text-muted:      #94a3b8;
    --ts-text-subtle:     #64748b;
    --ts-text-footer:     #475569;

    --ts-border:          #1e2535;
    --ts-border-badge:    #2d3748;
}

/* ── Bootstrap overrides ─────────────────────────────────────────────────── */
body {
    background-color: var(--ts-bg);
    color: var(--ts-text);
}

pre, code {
    background-color: var(--ts-bg-card);
    color: var(--ts-text-muted);
    border-color: var(--ts-border);
}

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar {
    background-color: var(--ts-bg) !important;
    border-bottom: 1px solid var(--ts-border);
}
.navbar-brand {
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--ts-accent) !important;
}
.nav-link {
    color: var(--ts-text-muted) !important;
    font-size: .875rem;
    letter-spacing: .5px;
}
.nav-link:hover { color: var(--ts-accent) !important; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer {
    background-color: var(--ts-bg-footer);
    border-top: 1px solid var(--ts-border);
    color: var(--ts-text-footer);
    font-size: .8rem;
    padding: 1.5rem 0;
}

/* ── Section labels ──────────────────────────────────────────────────────── */
.section-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--ts-accent);
    margin-bottom: .5rem;
}
.section-heading {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--ts-text-heading);
    margin-bottom: 2rem;
}

/* ── Dark card (generic reusable surface) ────────────────────────────────── */
.dark-card {
    background-color: var(--ts-bg-card);
    border: 1px solid var(--ts-border);
    border-radius: 8px;
    padding: 1.5rem;
    transition: border-color .2s;
}
.dark-card:hover { border-color: var(--ts-accent-hover); }

/* ── Skill badges ────────────────────────────────────────────────────────── */
.skill-group-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--ts-text-subtle);
    margin-bottom: .5rem;
}
.skill-badge {
    display: inline-block;
    background-color: var(--ts-bg-badge);
    color: var(--ts-text-muted);
    border: 1px solid var(--ts-border-badge);
    border-radius: 4px;
    padding: .25rem .65rem;
    font-size: .8rem;
    margin: .2rem;
    transition: border-color .2s, color .2s;
}
.skill-badge:hover {
    border-color: var(--ts-accent);
    color: var(--ts-accent);
}
.skill-badge.primary {
    background-color: var(--ts-bg-badge-active);
    color: var(--ts-accent);
    border-color: var(--ts-accent-border);
}

/* ── Contact links ───────────────────────────────────────────────────────── */
.contact-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--ts-text-muted);
    text-decoration: none;
    font-size: .95rem;
    padding: .5rem 0;
    transition: color .2s;
}
.contact-link:hover { color: var(--ts-accent); }
.contact-link i { font-size: 1.1rem; }

/* ── Utilities ───────────────────────────────────────────────────────────── */
.text-accent  { color: var(--ts-accent); }
.divider      { border-color: var(--ts-border); }