/* ========================================================================
   THEME.CSS — SLOB (Soaps, Lotions, Oils & Balms)
   Site-specific STRUCTURAL extras only. Color VALUES live in config.php
   (THEME_* constants) and are emitted as :root vars by theme-vars.php.

   FRAMEWORK CSS DOCTRINE:
     1. config.php          → THEME_* color constants (per-site values)
     2. theme-vars.php      → emits constants as :root CSS vars (shared partial)
     3. universal.css       → framework rules using var() (identical across all sites)
     4. theme.css (THIS)    → site-specific structural extras only

   What this file owns for SLOB:
     - LIGHT-THEME body baseline (bg = cream, text = dark sage)
       SLOB is the framework's first light-themed site. universal.css's
       rules don't dictate body colors; this file makes them right for the
       light canvas.
     - Airy spacing rhythm (looser line-height, more headline breathing room)
     - Subtle sage scrollbar (no chunky brass / brass-glow vibe)
     - Heading weights toned down (light botanical = elegant, not bold)
   ======================================================================== */

/* === BODY BASELINE (light theme) ======================================== */

body {
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    background: var(--bg-base);
    color: var(--text-on-light);
    line-height: 1.75;            /* airier than the framework default 1.6 */
    min-height: 100vh;
    overflow-x: hidden;
    font-weight: 400;
}

#outerFrame {
    position: relative;
    z-index: 1;
}

/* === HEADINGS (lighter weights, generous spacing) ======================= */

h1, h2, h3, h4, h5, h6 {
    color: var(--text-on-light-accent);
    font-weight: 500;             /* not bold — botanical elegance */
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin-top: 1.5em;
    margin-bottom: 0.6em;
}

h1 { font-weight: 600; }          /* h1 still has presence */

/* === LINKS ============================================================== */

a {
    color: var(--primary-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: var(--primary-accent);
    text-underline-offset: 3px;
}

/* === PARAGRAPH RHYTHM ===================================================
   "More space, but not wasted space" — paragraphs get explicit bottom
   margin so the air is between blocks of thought, not unstructured. */

p {
    margin-bottom: 1.1em;
}

p:last-child {
    margin-bottom: 0;
}

/* === SECTIONS / CONTENT BLOCKS ==========================================
   Generous padding around major sections; SLOB's pages should feel
   composed and unhurried. */

main, section, article {
    padding-block: 1.5rem;
}

/* === TEXT SELECTION ===================================================== */

::selection {
    background: var(--primary-accent);
    color: var(--text-on-light-accent);
}

/* === SCROLLBAR (subtle sage on cream) =================================== */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-accent) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--primary-accent);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* === BUTTON ON-LIGHT-PAGE NUANCE ========================================
   SLOB's bg is light cream. universal.css's default `.button` has
   `background: var(--neutral)` = `--secondary` = warm sand. Light
   sand on light cream needs a subtle border to define the button. */

.button:not(.primary):not(.secondary):not(.danger):not(.compact),
button:not(.primary):not(.secondary):not(.danger):not(.compact) {
    border: 1px solid var(--border);
}

.button:not(.primary):not(.secondary):not(.danger):not(.compact):hover,
button:not(.primary):not(.secondary):not(.danger):not(.compact):hover {
    border-color: var(--primary-dark);
}

/* === PRIMARY BUTTON — high-contrast deep sage with cream text ===========
   Since SLOB redefines --text-on-dark to a DARK value (so most universal.css
   rules read on light surfaces), the framework's default
   `.button.primary { background: var(--primary); color: var(--text-on-dark); }`
   would put dark sage text on medium sage = low contrast. Override to
   use the deepest sage tier with cream text — crisp, brand-consistent. */

.button.primary,
button.primary,
input[type="submit"].primary,
input[type="button"].primary {
    background: var(--primary-dark);
    color: var(--bg-base);              /* cream on deep sage = high contrast */
    border: 1px solid var(--primary-dark);
}

.button.primary:hover,
button.primary:hover {
    background: var(--primary);
    color: var(--bg-base);
    border-color: var(--primary);
    box-shadow: 0 0 16px var(--focus-ring);
}

/* === DANGER BUTTON — same logic, deep terracotta with cream text ======== */

.button.danger,
button.danger {
    background: var(--tertiary-dark);
    color: var(--bg-base);
    border: 1px solid var(--tertiary-dark);
}

.button.danger:hover {
    background: var(--tertiary);
    color: var(--bg-base);
    border-color: var(--tertiary);
}