/**
 * warm-theme.css — Experiment6 warm paper theme override
 * Replaces botanical.css. Uses the same CSS variable names so all
 * existing components (cards, nav, articles, tags) pick up the new palette.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

body.warm {
    --bg: #f5efe6;
    --surface: #ece3d4;
    --border: rgba(59,58,54,0.15);
    --text: #3b3a36;
    --text-muted: #6a6860;
    --accent: #c97a5b;
    --accent-glow: rgba(201,122,91,0.15);
    --green: #a8b9a3;
    --yellow: #c9a961;
    --red: #c97a5b;
    --blue: #c8d3d8;

    background:
        radial-gradient(ellipse at 20% 0%, #e7dccb 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, #d3dde2 0%, transparent 50%),
        var(--bg);
    color: var(--text);
    font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Paper grain */
body.warm::before {
    content: "";
    position: fixed; inset: 0;
    background-image:
        radial-gradient(rgba(59,58,54,0.04) 1px, transparent 1px),
        radial-gradient(rgba(59,58,54,0.03) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 1px;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: multiply;
}

body.warm > * {
    position: relative;
    z-index: 1;
}

/* Nav */
body.warm nav {
    background: rgba(245,239,230,0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(59,58,54,0.15);
}

body.warm nav .logo-text,
body.warm nav .nav-links a {
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
}

body.warm nav .nav-links a:hover {
    color: var(--accent);
}

body.warm nav .logo-img {
    filter: none;
}

body.warm .nav-cta {
    background: var(--accent);
    color: #fff;
}

/* Buttons */
body.warm .btn-primary {
    background: var(--accent);
    color: var(--bg);
    border-color: rgba(59,58,54,0.2);
    box-shadow: 0 4px 0 #9a5a40, 0 12px 24px -8px rgba(201,122,91,0.5);
}

body.warm .btn-primary:hover {
    box-shadow: 0 2px 0 #9a5a40, 0 6px 14px -4px rgba(201,122,91,0.5);
    transform: translateY(2px);
    color: var(--bg);
}

body.warm .btn-outline {
    border-color: var(--text);
    color: var(--text);
}

body.warm .btn-outline:hover {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

/* Cards */
body.warm .project-card,
body.warm .blog-card,
body.warm .detail-card {
    background: var(--bg);
    border: 1px solid rgba(59,58,54,0.12);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        8px 10px 0 rgba(59,58,54,0.06),
        0 24px 48px -24px rgba(59,58,54,0.18);
}

body.warm .project-card:hover,
body.warm .blog-card:hover {
    border-color: rgba(59,58,54,0.2);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        10px 14px 0 rgba(59,58,54,0.08),
        0 32px 64px -24px rgba(59,58,54,0.24);
}

body.warm .project-screenshot {
    background: var(--surface);
    border-bottom-color: rgba(59,58,54,0.1);
}

/* Tags */
body.warm .tag {
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid rgba(59,58,54,0.12);
    font-family: 'JetBrains Mono', monospace;
}

body.warm .tag:nth-child(3n+1) {
    color: var(--accent);
    background: rgba(201,122,91,0.1);
}

body.warm .tag:nth-child(3n+2) {
    color: #6a8a60;
    background: rgba(168,185,163,0.15);
}

body.warm .tag:nth-child(3n+3) {
    color: #9a7d3a;
    background: rgba(201,169,97,0.12);
}

/* Sections */
body.warm .section-wrap,
body.warm .section-wrap:nth-child(odd),
body.warm .section-wrap:nth-child(even),
body.warm .section-wrap--hero,
body.warm .section-wrap--about,
body.warm .section-wrap--projects,
body.warm .section-wrap--skills,
body.warm .section-wrap--blog,
body.warm .section-wrap--news,
body.warm .section-wrap--twin,
body.warm .section-wrap--contact {
    background: transparent;
}

body.warm .section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    color: var(--text);
}

body.warm .section-subtitle {
    color: var(--text-muted);
}

/* Blog */
body.warm .blog-card .blog-date {
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

body.warm .read-more {
    color: var(--accent);
}

/* Skills */
body.warm .skill-category h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
}

body.warm .skill-category:nth-child(1) h3 { color: var(--accent); }
body.warm .skill-category:nth-child(2) h3 { color: #6a8a60; }
body.warm .skill-category:nth-child(3) h3 { color: #9a7d3a; }
body.warm .skill-category:nth-child(4) h3 { color: var(--text); }
body.warm .skill-category:nth-child(5) h3 { color: var(--text-muted); }

body.warm .skill-category li::before {
    content: '·';
    color: var(--accent);
    font-weight: bold;
    font-size: 1.2rem;
}

/* Footer */
body.warm footer {
    border-top-color: rgba(59,58,54,0.15);
    color: var(--text-muted);
}

/* Links */
body.warm a {
    color: var(--accent);
}

body.warm a.btn-primary {
    color: var(--bg);
}

body.warm a.btn-outline {
    color: var(--text);
}

/* Article pages */
body.warm .article-back {
    color: var(--accent);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

body.warm .article-header h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    color: var(--text);
}

body.warm .article-date {
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

body.warm .article-header .article-subtitle {
    color: var(--text-muted);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
}

body.warm .article-body h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    color: var(--text);
}

body.warm .article-body h3 {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text);
}

body.warm .article-body p {
    color: var(--text-muted);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.7;
}

body.warm .article-body ul,
body.warm .article-body ol {
    color: var(--text-muted);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
}

body.warm .article-body code {
    background: var(--surface);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
}

body.warm .article-body pre {
    background: var(--bg);
    border: 1px solid rgba(59,58,54,0.15);
}

body.warm .article-body pre code {
    font-family: 'JetBrains Mono', monospace;
}

body.warm .article-body strong {
    color: var(--text);
}

body.warm .article-body blockquote {
    border-left-color: var(--accent);
    color: var(--text-muted);
    font-style: italic;
}

body.warm .article-footer {
    border-top-color: rgba(59,58,54,0.15);
    color: var(--text-muted);
    font-family: 'Inter', system-ui, sans-serif;
}

/* Project demo pages — game wrapper */
body.warm .game-wrapper {
    max-width: 840px;
    margin: 2rem auto 0;
}

body.warm .game-frame {
    border: 1px solid rgba(59,58,54,0.15);
    border-radius: 8px;
    box-shadow:
        8px 10px 0 rgba(59,58,54,0.06),
        0 24px 48px -24px rgba(59,58,54,0.18);
}

body.warm .game-info {
    color: var(--text-muted);
    font-family: 'Cormorant Garamond', Georgia, serif;
}

body.warm .game-info h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    color: var(--text);
}

body.warm .game-info table {
    border-color: rgba(59,58,54,0.12);
}

body.warm .game-info td,
body.warm .game-info th {
    border-color: rgba(59,58,54,0.12);
    color: var(--text-muted);
}

body.warm .game-info th {
    color: var(--text);
    background: var(--surface);
}

body.warm .tech-tags span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid rgba(59,58,54,0.12);
}

/* Mobile nav */
@media (max-width: 768px) {
    body.warm nav .nav-links {
        background: rgba(245,239,230,0.97);
    }
    body.warm::before {
        display: none;
    }
}