/* css/theme.css - Light professional theme (green + purple accents) */

:root{
    --page-bg: #1f2330;        /* deep blue-gray */
    --surface: #2a3040;        /* cards */
    --surface-2: #32384a;      /* hover/alt */
    --text: #e8ecf4;
    --muted: rgba(232,236,244,0.72);
    --border: rgba(255,255,255,0.10);

    --accent-purple: #6b4fe6;
    --accent-green: #1f8a5b;
}

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

.content-card{
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.content-card p,
.muted{
    color: var(--muted);
}



/* Links */
a {
    color: var(--link);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Top-level chrome */
header.site-header {
    background-color: transparent;
}

header.site-header {
    background-color: transparent;
}

footer.site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}


/* Navigation pills */
nav.site-nav a {
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

nav.site-nav a:hover {
    border-color: var(--border);
    background: rgba(31, 138, 91, 0.08); /* green tint */
    text-decoration: none;
    transform: translateY(-1px);
}

nav.site-nav a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* Optional "current page" support if you add aria-current="page" on nav links */
nav.site-nav a[aria-current="page"] {
    border-color: rgba(107, 79, 230, 0.35);
    background: rgba(107, 79, 230, 0.10);
}

/* Content cards */
.content-card {
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

/* Utility classes you already use */
.muted { color: var(--muted); }
.accent { color: var(--accent); }

/* Extra utilities (optional use) */
.accent-green { color: var(--accent-green); }
.accent-purple { color: var(--accent-purple); }

/* Code blocks / inline code (optional, but looks more "professional") */
code, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
code {
    background: var(--panel-2);
    border: 1px solid var(--border);
    padding: 0.15rem 0.35rem;
    border-radius: 8px;
}
pre {
    background: var(--panel-2);
    border: 1px solid var(--border);
    padding: 14px;
    border-radius: 12px;
    overflow: auto;
}