/* =============================================================================
   UI VARIANT: "warm"  —  Warm minimal
   Loaded on top of base.css when personal_info.ui == "warm".
   Cream/off-white surfaces, muted teal accent, editorial serif headings,
   soft shadows and generous rounding. Clean but friendly rather than stark.
   Restyles mostly by redefining base.css's CSS variables + a few overrides.
   ========================================================================== */

/* --- Palette (light) --- */
:root {
    --bg-primary: #faf6f0;
    --bg-secondary: #f2ebe0;
    --bg-tertiary: #ebe1d3;
    --text-primary: #2c2622;
    --text-secondary: #5c5349;
    --text-muted: #8a7f72;
    --border: #e6dccd;
    --border-hover: #d8ccb9;
    --accent: #4f8079;          /* muted teal */
    --accent-hover: #3c6862;
    --code-bg: #f2ebe0;
    --code-inline-bg: #ebe1d3;
    --shadow: 0 2px 10px rgba(80, 60, 40, 0.06);
    --shadow-lg: 0 14px 30px rgba(80, 60, 40, 0.10);
}

/* --- Palette (dark): warm charcoal/brown --- */
[data-theme="dark"] {
    --bg-primary: #211d1a;
    --bg-secondary: #2a2521;
    --bg-tertiary: #342e29;
    --text-primary: #f2ece3;
    --text-secondary: #cfc4b6;
    --text-muted: #9c9184;
    --border: #3a332d;
    --border-hover: #4a4239;
    --accent: #6fa9a0;          /* muted teal (dark) */
    --accent-hover: #8cc0b8;
    --code-bg: #2a2521;
    --code-inline-bg: #342e29;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 14px 30px rgba(0, 0, 0, 0.40);
}

/* --- Typography: editorial serif headings, comfortable body --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.7;
}
h1, h2, h3, h4, h5, h6,
.hero-title, .section-title, .card-title {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* --- Navbar: soft, borderless, blended into the cream --- */
.navbar {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    backdrop-filter: none;
}
.navbar-brand .navbar-logo {
    font-family: Georgia, serif;
}

/* --- Hero: soft warm wash, solid (non-gradient) serif headline --- */
.hero {
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    padding: 5rem 0;
}
.hero-title {
    /* undo base.css gradient-clipped text */
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--text-primary);
    font-size: 3.25rem;
}
.hero-subtitle {
    color: var(--accent);
    font-style: italic;
    font-family: Georgia, serif;
}

/* Soft rounded-rectangle portrait instead of a hard circle */
.hero-photo {
    width: 100%;
    max-width: 300px;
    height: 340px;
    border-radius: 24px;
    object-fit: cover;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

/* --- Sections --- */
.section-title {
    font-size: 2.25rem;
}

/* --- Cards: soft frames, generous rounding, gentle lift on hover --- */
.card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-hover);
}
.card-image {
    height: 260px;
}
.card-title {
    font-size: 1.2rem;
}
.tag {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 999px;
}
.tag-more {
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
}

/* --- Buttons: pill-shaped, warm --- */
.btn {
    border-radius: 999px;
    font-weight: 500;
}

/* --- Hobby widgets & footer --- */
.hobby-widget {
    border-radius: 18px;
    box-shadow: var(--shadow);
}
.footer {
    background: var(--bg-secondary);
}

/* --- Mobile --- */
@media (max-width: 768px) {
    .hero-title { font-size: 2.5rem; }
    .hero-photo { max-width: 100%; height: 320px; }
}