:root {
    --primary: #facc15;
    --primary-hover: #eab308;
    --primary-soft: #fef9c3;
    --primary-line: #fde047;
    --primary-contrast: #422006;
    --focus: rgba(250, 204, 21, 0.28);
}

html {
    color-scheme: light;
}

body {
    background:
        radial-gradient(
            circle at 15% -10%,
            rgba(250, 204, 21, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 4%,
            rgba(234, 179, 8, 0.08),
            transparent 28%
        ),
        var(--background);
}

::selection {
    color: #422006;
    background: #fef08a;
}

.brand-mark,
.avatar {
    color: #422006;
    background: linear-gradient(
        145deg,
        #fde047 0%,
        #eab308 100%
    );
    box-shadow:
        0 8px 18px rgba(202, 138, 4, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.button-primary {
    color: #422006;
    background: linear-gradient(
        180deg,
        #fde047 0%,
        #facc15 100%
    );
    box-shadow:
        0 8px 18px rgba(202, 138, 4, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.button-primary:hover:not(:disabled) {
    color: #422006;
    background: linear-gradient(
        180deg,
        #facc15 0%,
        #eab308 100%
    );
    box-shadow:
        0 10px 22px rgba(202, 138, 4, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.auth-tab.active,
.side-nav button.active,
.policy-tab.active,
.badge-primary {
    color: #713f12;
}

.side-nav button.active .nav-icon,
.badge-primary {
    border-color: var(--primary-line);
}

.policy-card::before {
    background: var(--primary-line);
}

.policy-hero,
.thread-focus-header {
    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(250, 204, 21, 0.13),
            transparent 34%
        ),
        #ffffff;
}

.theme-toggle {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    transition:
        border-color 140ms ease,
        background 140ms ease,
        transform 140ms ease;
}

.theme-toggle:hover {
    border-color: var(--line-strong);
    background: var(--surface-soft);
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--focus);
}

.theme-toggle-icon {
    width: 1.2em;
    text-align: center;
    font-size: 14px;
    line-height: 1;
}

.theme-toggle-label {
    white-space: nowrap;
}


/* =========================================================
   DARK THEME
   ========================================================= */

html[data-theme="dark"] {
    color-scheme: dark;

    --background: #0b0f14;

    --surface: #121821;
    --surface-soft: #18202b;
    --surface-muted: #202a36;

    --text: #f8fafc;
    --text-soft: #b8c2d0;
    --text-faint: #8996a8;

    --line: #283443;
    --line-strong: #3a485b;

    --primary: #facc15;
    --primary-hover: #fde047;
    --primary-soft: rgba(250, 204, 21, 0.12);
    --primary-line: rgba(250, 204, 21, 0.42);
    --primary-contrast: #1c1917;

    --focus: rgba(250, 204, 21, 0.24);

    --danger: #fda29b;
    --danger-background: rgba(180, 35, 24, 0.14);

    --success: #6ce9a6;
    --success-background: rgba(6, 118, 71, 0.16);

    --shadow-sm:
        0 1px 2px rgba(0, 0, 0, 0.24);

    --shadow-md:
        0 12px 32px rgba(0, 0, 0, 0.28),
        0 2px 8px rgba(0, 0, 0, 0.22);

    --shadow-lg:
        0 24px 70px rgba(0, 0, 0, 0.38),
        0 8px 24px rgba(0, 0, 0, 0.24);
}


/* Main page colours */

html[data-theme="dark"],
html[data-theme="dark"] body {
    color: var(--text);
    background-color: var(--background);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .workspace {
    background:
        radial-gradient(
            circle at 15% -10%,
            rgba(250, 204, 21, 0.08),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 4%,
            rgba(234, 179, 8, 0.05),
            transparent 28%
        ),
        var(--background);
}


/*
 * Some of the original stylesheets use explicit colours such
 * as #334155 instead of var(--text). Reset normal text in dark
 * mode so those light-theme declarations cannot remain dark.
 */

html[data-theme="dark"] body,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] strong,
html[data-theme="dark"] label,
html[data-theme="dark"] summary,
html[data-theme="dark"] button,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .field > span,
html[data-theme="dark"] .search-box span,
html[data-theme="dark"] .sidebar-explainer strong,
html[data-theme="dark"] .workspace-topbar strong,
html[data-theme="dark"] .post-meta strong,
html[data-theme="dark"] .post-body,
html[data-theme="dark"] .history-details summary,
html[data-theme="dark"] .new-thread-box > summary,
html[data-theme="dark"] .thread-details > summary,
html[data-theme="dark"] .document-text,
html[data-theme="dark"] .thread-message p {
    color: var(--text);
}


/* Muted / secondary text */

html[data-theme="dark"] .brand-copy span,
html[data-theme="dark"] .header-username,
html[data-theme="dark"] .card-heading > p:last-child,
html[data-theme="dark"] .dashboard-heading > div > p:last-child,
html[data-theme="dark"] .field small,
html[data-theme="dark"] .help-text,
html[data-theme="dark"] .side-nav button,
html[data-theme="dark"] .side-nav small,
html[data-theme="dark"] .sidebar-explainer p,
html[data-theme="dark"] .member-row small,
html[data-theme="dark"] #saveState,
html[data-theme="dark"] .page-heading-copy > p:last-child,
html[data-theme="dark"] .policy-hero > div > p:last-child,
html[data-theme="dark"] .panel-header p,
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .draft-intro p,
html[data-theme="dark"] .source-note p,
html[data-theme="dark"] .policy-card p:last-child,
html[data-theme="dark"] .policy-stats span,
html[data-theme="dark"] .policy-tab,
html[data-theme="dark"] .context-banner p,
html[data-theme="dark"] .post-meta small,
html[data-theme="dark"] .draft-card-head p,
html[data-theme="dark"] .paper-header small,
html[data-theme="dark"] .thread-summary-copy small,
html[data-theme="dark"] .thread-summary-arrow,
html[data-theme="dark"] .message-head small,
html[data-theme="dark"] .history-row span,
html[data-theme="dark"] .history-row small,
html[data-theme="dark"] .activity-row small,
html[data-theme="dark"] .activity-row p,
html[data-theme="dark"] .guide-number,
html[data-theme="dark"] .guide-card p,
html[data-theme="dark"] .boot-screen,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .badge {
    color: var(--text-soft);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-faint);
    opacity: 1;
}


/* Header */

html[data-theme="dark"] .site-header {
    border-bottom-color: rgba(58, 72, 91, 0.78);
    background: rgba(18, 24, 33, 0.88);
}

html[data-theme="dark"] .workspace-topbar {
    border-bottom-color: rgba(58, 72, 91, 0.78);
    background: rgba(18, 24, 33, 0.9);
}


/* Sidebar */

html[data-theme="dark"] .sidebar {
    border-color: var(--line);
    background: rgba(18, 24, 33, 0.96);
    box-shadow: 12px 0 36px rgba(0, 0, 0, 0.16);
}

html[data-theme="dark"] .sidebar-explainer {
    border-color: var(--line);
    background: var(--surface-soft);
}


/* Authentication cards */

html[data-theme="dark"] .auth-card {
    color: var(--text);
    border-color: var(--line);
    background: rgba(18, 24, 33, 0.96);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .card-heading h1 {
    color: var(--text);
}

html[data-theme="dark"] .eyebrow {
    color: var(--primary);
}

html[data-theme="dark"] .auth-tabs {
    border-color: var(--line);
    background: var(--surface-soft);
}

html[data-theme="dark"] .auth-tab {
    color: var(--text-soft);
}

html[data-theme="dark"] .auth-tab:hover {
    color: var(--text);
}

html[data-theme="dark"] .auth-tab.active {
    color: var(--text);
    background: var(--surface-muted);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .card-icon {
    color: var(--primary);
    border-color: var(--primary-line);
    background: var(--primary-soft);
    box-shadow: none;
}


/* Inputs */

html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea {
    color: var(--text);
    border-color: var(--line-strong);
    background: var(--surface);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

html[data-theme="dark"] .search-box input:hover,
html[data-theme="dark"] .field input:hover,
html[data-theme="dark"] .field select:hover,
html[data-theme="dark"] .field textarea:hover {
    border-color: #526176;
}

html[data-theme="dark"] .search-box input:focus,
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .field textarea:focus {
    border-color: var(--primary-line);
    box-shadow: 0 0 0 4px var(--focus);
}


/* Main surface/card backgrounds */

html[data-theme="dark"] .nav-icon,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .policy-card,
html[data-theme="dark"] .policy-tabs,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .history-details,
html[data-theme="dark"] .draft-intro,
html[data-theme="dark"] .draft-card,
html[data-theme="dark"] .paper,
html[data-theme="dark"] .discussion-thread,
html[data-theme="dark"] .comparison-heading,
html[data-theme="dark"] .comparison-paper,
html[data-theme="dark"] .comparison-paper .paper-header,
html[data-theme="dark"] .thread-focus-header {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}


/* Paper / document */

html[data-theme="dark"] .paper-header {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface-soft);
}

html[data-theme="dark"] .document-text {
    color: var(--text);
    background: var(--surface);
}


/* Navigation */

html[data-theme="dark"] .side-nav button {
    color: var(--text-soft);
}

html[data-theme="dark"] .side-nav button:hover {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface-soft);
}

html[data-theme="dark"] .side-nav button.active {
    color: #fde68a;
    border-color: var(--primary-line);
    background: var(--primary-soft);
    box-shadow: none;
}

html[data-theme="dark"] .side-nav button.active strong {
    color: #fde68a;
}

html[data-theme="dark"] .side-nav button.active small {
    color: #d6c978;
}

html[data-theme="dark"] .side-nav button.active .nav-icon {
    color: var(--primary);
    border-color: var(--primary-line);
    background: #1a2029;
}


/* Policy tabs */

html[data-theme="dark"] .policy-tab {
    color: var(--text-soft);
}

html[data-theme="dark"] .policy-tab:hover {
    color: var(--text);
    background: var(--surface-soft);
}

html[data-theme="dark"] .policy-tab.active {
    color: #fde68a;
    background: var(--primary-soft);
    box-shadow: inset 0 0 0 1px var(--primary-line);
}


/* Hero */

html[data-theme="dark"] .policy-hero,
html[data-theme="dark"] .thread-focus-header {
    color: var(--text);
    border-color: var(--line);
    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(250, 204, 21, 0.08),
            transparent 34%
        ),
        var(--surface);
}


/* Stats and smaller secondary surfaces */

html[data-theme="dark"] .policy-stats div,
html[data-theme="dark"] .new-thread-box,
html[data-theme="dark"] .thread-message,
html[data-theme="dark"] .guide-number,
html[data-theme="dark"] .history-row,
html[data-theme="dark"] .activity-row {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface-soft);
}


/* Mine / highlighted content */

html[data-theme="dark"] .post-card.mine,
html[data-theme="dark"] .draft-card.mine,
html[data-theme="dark"] .thread-edit-form {
    color: var(--text);
    border-color: var(--primary-line);
    background: var(--primary-soft);
}

html[data-theme="dark"] .post-card.mine .post-meta strong,
html[data-theme="dark"] .post-card.mine .post-body,
html[data-theme="dark"] .draft-card.mine h2,
html[data-theme="dark"] .thread-edit-form label,
html[data-theme="dark"] .thread-edit-form p {
    color: var(--text);
}


/* Empty state */

html[data-theme="dark"] .empty-state {
    color: var(--text-soft);
    border-color: var(--line-strong);
    background: rgba(18, 24, 33, 0.72);
}


/* Context banners */

html[data-theme="dark"] .context-banner {
    color: var(--text);
    border-color: #31577a;
    background: #14283a;
}

html[data-theme="dark"] .context-banner strong {
    color: var(--text);
}

html[data-theme="dark"] .context-banner p {
    color: #b9c9d8;
}

html[data-theme="dark"] .context-banner.historical {
    color: var(--text);
    border-color: #70551c;
    background: #2b2413;
}

html[data-theme="dark"] .context-banner.historical p {
    color: #d6cba8;
}


/* Badges */

html[data-theme="dark"] .badge {
    color: var(--text-soft);
    border-color: var(--line);
    background: var(--surface-soft);
}

html[data-theme="dark"] .badge-primary {
    color: #fde68a;
    border-color: var(--primary-line);
    background: var(--primary-soft);
}

html[data-theme="dark"] .badge-success {
    border-color: #216e4a;
    color: #6ce9a6;
    background: #10291f;
}

html[data-theme="dark"] .badge-warning {
    border-color: #7a5b18;
    color: #fdb022;
    background: #2b2413;
}


/* Secondary buttons */

html[data-theme="dark"] .button-secondary {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}

html[data-theme="dark"] .button-secondary:hover:not(:disabled) {
    color: var(--text);
    border-color: var(--line-strong);
    background: var(--surface-soft);
}


/* Danger buttons */

html[data-theme="dark"] .button-danger {
    color: #fda29b;
    border-color: #7a2e2a;
    background: var(--surface);
}

html[data-theme="dark"] .button-danger:hover:not(:disabled) {
    color: #fecaca;
    border-color: #a83c36;
    background: #2d1716;
}


/* Text button */

html[data-theme="dark"] .text-button {
    color: var(--text-soft);
}

html[data-theme="dark"] .text-button:hover {
    color: var(--primary);
    background: var(--primary-soft);
}


/* Private label */

html[data-theme="dark"] .private-label {
    color: var(--text-soft);
    border-color: var(--line);
    background: var(--surface-muted);
}


/* Notices */

html[data-theme="dark"] .workspace-notice {
    border-bottom-color: #216e4a;
    color: #6ce9a6;
    background: #10291f;
}

html[data-theme="dark"] .workspace-notice.error {
    border-bottom-color: #7a2e2a;
    color: #fda29b;
    background: #2d1716;
}


/* Form messages */

html[data-theme="dark"] .form-message {
    border-color: #7a2e2a;
    color: #fda29b;
    background: #2d1716;
}

html[data-theme="dark"] .form-message.success {
    border-color: #216e4a;
    color: #6ce9a6;
    background: #10291f;
}


/* Theme toggle */

html[data-theme="dark"] .theme-toggle {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}

html[data-theme="dark"] .theme-toggle:hover {
    color: var(--text);
    border-color: var(--line-strong);
    background: var(--surface-soft);
}


/*
 * Yellow elements intentionally use dark text because white
 * text has poor contrast against the yellow background.
 */

html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .button-primary {
    color: #1c1917;
}

html[data-theme="dark"] .button-primary:hover:not(:disabled) {
    color: #1c1917;
}


/* SVGs using currentColor follow their surrounding text */

html[data-theme="dark"] svg {
    color: inherit;
}


/* Text selection */

html[data-theme="dark"] ::selection {
    color: #1c1917;
    background: #fde047;
}


/* Native controls */

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    caret-color: var(--text);
}

html[data-theme="dark"] select option {
    color: var(--text);
    background: var(--surface);
}


/* Scrollbars */

html[data-theme="dark"] {
    scrollbar-color: #3a485b #121821;
}


/* Mobile */

@media (max-width: 620px) {
    .theme-toggle {
        padding: 0 10px;
    }

    .theme-toggle-label {
        display: none;
    }
}