/* Writemedia Brand Theme System
   Dark-first with light mode support.
   Variables map to the colour palette defined in colour-palette.html.
   Override rules use [data-theme="light"] for higher specificity than page styles. */

:root {
    --page-bg: #1A1717;
    --surface-bg: #221E1E;
    --card-bg: #2A2525;
    --elevated-bg: #3B3535;
    --border: #3B3535;
    --border-subtle: #2E2929;
    --text-heading: #FFFFFF;
    --text-primary: #F5F0ED;
    --text-secondary: #D4CCC8;
    --text-tertiary: #ACA4A0;
    --text-muted: #958D89;
    --accent: #E91E8C;
    --accent-hover: #DE1C86;
    --silver: #B0B8C4;
}

[data-theme="light"] {
    --page-bg: #F5F0ED;
    --surface-bg: #FFFFFF;
    --card-bg: #FFFFFF;
    --elevated-bg: #F5F0ED;
    --border: #E8E0DC;
    --border-subtle: #E8E0DC;
    --text-heading: #221E1E;
    --text-primary: #221E1E;
    --text-secondary: #6B6362;
    --text-tertiary: #6B6362;
    --text-muted: #958D89;
    --accent: #E91E8C;
    --accent-hover: #C81478;
    --silver: #5F6B7A;
}

/* ── Theme toggle button ── */
.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 7px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s;
    margin-left: auto;
    flex-shrink: 0;
}
.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ══════════════════════════════════════════════════════
   LIGHT THEME STRUCTURAL OVERRIDES
   The [data-theme="light"] attribute selector gives these
   higher specificity than the page's own <style> rules.
   ══════════════════════════════════════════════════════ */

/* ── Body ── */
[data-theme="light"] body {
    background: #F5F0ED;
    color: #221E1E;
}

/* ── Brand nav (shared across all pages) ── */
[data-theme="light"] .brand-nav {
    background: #FFFFFF;
    border-bottom-color: #E8E0DC;
}
[data-theme="light"] .brand-nav a {
    color: #6B6362;
}
[data-theme="light"] .brand-nav a:hover,
[data-theme="light"] .brand-nav a.active {
    color: #221E1E;
    background: #F5F0ED;
}
[data-theme="light"] .brand-nav .nav-home {
    color: #E91E8C;
}
[data-theme="light"] .brand-nav .nav-home:hover {
    background: #F5F0ED;
}
[data-theme="light"] .brand-nav .nav-sep {
    color: #E8E0DC;
}

/* ── Page header (typography, logo, imagery, voice, messaging pages) ── */
[data-theme="light"] .header {
    background: #FFFFFF;
    border-bottom-color: #E8E0DC;
}
[data-theme="light"] .header h1 {
    color: #C81478;
}
[data-theme="light"] .header p {
    color: #6B6362;
}

/* ── Headings ── */
[data-theme="light"] h1 {
    color: #221E1E;
}
[data-theme="light"] h2 {
    color: #221E1E;
    border-bottom-color: #E8E0DC;
}
[data-theme="light"] h3 {
    color: #221E1E;
}
[data-theme="light"] .subtitle {
    color: #6B6362;
}

/* ── Body text ── */
[data-theme="light"] p,
[data-theme="light"] .section-note {
    color: #6B6362;
}

/* ── Tables ── */
[data-theme="light"] th {
    color: #6B6362;
    border-bottom-color: #E8E0DC;
}
[data-theme="light"] td {
    color: #221E1E;
    border-bottom-color: #E8E0DC;
}

/* ── Footer ── */
[data-theme="light"] .footer {
    border-top-color: #E8E0DC;
    color: #958D89;
}

/* ── Section titles (accent — same colour, but border changes) ── */
[data-theme="light"] .section-title {
    border-bottom-color: #E8E0DC;
}

/* ── Surfaces: cards, panels, boxes ── */
[data-theme="light"] .brand-intro,
[data-theme="light"] .doc-card,
[data-theme="light"] .naming-card,
[data-theme="light"] .segment-section,
[data-theme="light"] .pitch-card,
[data-theme="light"] .voice-attr {
    background: #FFFFFF;
    border-color: #E8E0DC;
}

[data-theme="light"] .brand-value,
[data-theme="light"] .type-sample,
[data-theme="light"] .naming-example,
[data-theme="light"] .note-box,
[data-theme="light"] .example-card,
[data-theme="light"] .sample-block,
[data-theme="light"] .message-block,
[data-theme="light"] .proof-item,
[data-theme="light"] .demo-block {
    background: #FFFFFF;
    border-color: #E8E0DC;
}

[data-theme="light"] .voice-chip {
    background: #FFFFFF;
    border-color: #E8E0DC;
    color: #221E1E;
}

/* ── Card text hierarchy ── */
[data-theme="light"] .doc-card .card-title,
[data-theme="light"] .example-card .card-title,
[data-theme="light"] .type-sample .primary,
[data-theme="light"] .naming-example .name,
[data-theme="light"] .message-block .msg-text,
[data-theme="light"] .pitch-card .pitch-text {
    color: #221E1E;
}

[data-theme="light"] .doc-card .card-desc,
[data-theme="light"] .brand-value .desc,
[data-theme="light"] .naming-example .context,
[data-theme="light"] .naming-example .note,
[data-theme="light"] .voice-attr .desc,
[data-theme="light"] .message-block .msg-note {
    color: #6B6362;
}

[data-theme="light"] .doc-card .card-file {
    color: #958D89;
    border-top-color: #E8E0DC;
}

[data-theme="light"] .doc-card:hover {
    background: #F5F0ED;
}

/* ── Silver accents ── */
[data-theme="light"] .type-sample .mono {
    color: #5F6B7A;
}
[data-theme="light"] .note-box.silver {
    border-left-color: #5F6B7A;
}

/* ── Swatch labels (brand-guidelines quick ref) ── */
[data-theme="light"] .swatch-label {
    color: #6B6362;
}
[data-theme="light"] .swatch-label strong {
    color: #221E1E;
}
[data-theme="light"] .swatch-block {
    border-color: rgba(0,0,0,0.1);
}

/* ── Typography page: specimens ── */
[data-theme="light"] .specimen {
    background: #FFFFFF;
}
[data-theme="light"] .specimen-meta {
    background: #F5F0ED;
    border-right-color: #E8E0DC;
}
[data-theme="light"] .specimen-role {
    color: #221E1E;
}
[data-theme="light"] .specimen-specs {
    color: #958D89;
}
[data-theme="light"] .specimen-preview {
    color: #221E1E;
}

/* ── Logo page: structural elements only (not demo cards) ── */
[data-theme="light"] .diagram-box {
    background: #FFFFFF;
    border-color: #E8E0DC;
}
[data-theme="light"] .card-label {
    color: #6B6362;
}
[data-theme="light"] .dont-card {
    background: #FFFFFF;
    border-color: #E8E0DC;
}
[data-theme="light"] .dont-example {
    background: #F5F0ED;
}
[data-theme="light"] .dont-label {
    color: #6B6362;
}

/* ── Note box ── */
[data-theme="light"] .note-box {
    background: #FFFFFF;
    border-left-color: #E91E8C;
    color: #6B6362;
}

/* ── Imagery page ── */
[data-theme="light"] .gradient-sample {
    border-color: #E8E0DC;
}
[data-theme="light"] .icon-sample {
    background: #FFFFFF;
    border-color: #E8E0DC;
}
[data-theme="light"] .screenshot-mockup {
    border-color: #E8E0DC;
}

/* ── Voice page: spectrum bars ── */
[data-theme="light"] .spectrum-bar {
    background: #F5F0ED;
}

/* ── Messaging page ── */
[data-theme="light"] .message-block .msg-label {
    color: #C81478;
}
[data-theme="light"] .pitch-card .pitch-label {
    color: #C81478;
}

/* ── Logo download cards (logo-usage page) ── */
[data-theme="light"] .download-card {
    background: #FFFFFF;
    border-color: #E8E0DC;
}

/* ── Proof items ── */
[data-theme="light"] .proof-item .proof-label {
    color: #C81478;
}