/* Shared appearance palettes. Components consume roles, never a theme name. */
:root {
	/* --- Surfaces (warm dark greys) ---
	   NOTE: neumorphism only reads right when the page background matches the
	   surface the shadows are tuned for. Keep --bg == the neu surface; do NOT
	   darken the page to fake card separation — it unbalances every shadow
	   (the light highlight starts to look too bright / puffed out). */
	--bg:              #2c2b2b;   /* page base == neu surface */
	--surface:         #2c2b2b;   /* neu card surface */
	--surface-raised:  #323130;
	--surface-sunken:  #232222;

	/* Neumorphic shadow stops — landed between the original and the first
	   refinement. The HIGHLIGHT (light side) sits between the original #3e3d3d
	   (felt too light/extended) and the first pass #383737 (felt too
	   restricted). Dark side kept steady/moderate. Balanced around the #2c2b2b
	   surface — tune the light side from --neu-light. */
	--neu-dark:  #191818;
	--neu-light: #3b3a3a;

	/* --- Text hierarchy (warm, with real contrast so nothing reads disabled) --- */
	--text-primary:   #f4f1eb;   /* headings, key values */
	--text-secondary: #cdc8bf;   /* body copy, table cells — lifted for life */
	--text-muted:     #97928a;   /* labels, metadata, hints */
	--text-faint:     #6b6760;   /* disabled, placeholders */

	/* --- Accent (copper) — the hero, incl. the gradient from the Add button --- */
	--accent:        #ffb067;
	--accent-fill:   #ffb067;   /* copper fills retain dark, readable ink in either mode */
	--accent-hover:  #ffc38a;
	--accent-dim:    rgba(255, 176, 103, 0.14);
	--accent-line:   rgba(255, 176, 103, 0.45);
	--select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23ffb067' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
	--accent-grad:        linear-gradient(145deg, #ffb877, #f0a058);
	--accent-grad-strong: linear-gradient(145deg, #ffc38a, #ffb067);
	--accent-ink:    #241a10;   /* dark text that sits on copper fills */

	/* --- Semantic --- */
	--success:      #63b8b2;
	--success-dim:  rgba(99, 184, 178, 0.15);
	--danger:       #e56d86;
	--danger-dim:   rgba(229, 109, 134, 0.16);
	--info:         #83a9cd;
	--info-dim:     rgba(131, 169, 205, 0.15);
	--warning:      #e2b56b;

	/* --- Lines --- */
	--border:       #3a3938;
	--border-soft:  rgba(255, 255, 255, 0.06);

	/* --- Radius --- */
	--r-sm: 0.5rem;
	--r-md: 0.85rem;
	--r-lg: 1.15rem;

    color-scheme: dark;
    --bg-main: var(--bg);
    --surface-console: #2e2d2d;
    --surface-modal: #303030;
    --surface-outer: #252424;
    --surface-hub: #383737;
    --surface-hover: #616060;
    --surface-gradient-top: #2f2e2e;
    --surface-gradient-bottom: #282727;
    --nav-text: #b4b1af;
    --nav-muted: #b0b0b0;
    --shadow-deep: #1a1919;
    --shadow-highlight: #3e3d3d;
    --shadow-floating: rgba(0, 0, 0, 0.35);
    --shadow-menu: rgba(0, 0, 0, 0.55);
    --shadow-launcher: rgba(0, 0, 0, 0.6);
    --shadow-soft: rgba(0, 0, 0, 0.14);
    --overlay: rgba(0, 0, 0, 0.55);
    --overlay-launcher: rgba(18, 17, 17, 0.55);
    --rim: rgba(255, 255, 255, 0.09);
    --wash-faint: rgba(255, 255, 255, 0.02);
    --wash-soft: rgba(255, 255, 255, 0.04);
    --wash: rgba(255, 255, 255, 0.06);
    --scrollbar: #45433f;
    --scrollbar-hover: #565350;
    --border-strong: #545454;
    --sage: #a8b8a0;
    --positive: #7ec8a0;
    --lavender-ink: #c98b9b;
    --purple-ink: #a998c4;
    --aqua: #6bc7c7;
    --email-blue: #7da3c7;
    --editor-link: #e764ff;
    --editor-invalid: #ff4e4e;
    --danger-line: rgba(220, 53, 69, 0.35);
    --info-line: rgba(131, 169, 205, 0.35);
    --warning-dim: rgba(226, 181, 107, 0.15);
    --funnel-shadow: #151414;
    --funnel-top: #454342;
    --funnel-mid: #3a3938;
    --funnel-bottom: #302f2e;
    --chart-ink: #e8e6e3;
    --chart-secondary: #b0b0b0;
    --chart-muted: #8a8886;
    --chart-grid: #3a3939;
    --chart-teal: #5fb3ad;
    --chart-copper: #ee9349;
    --chart-neutral: #575553;
    --chart-teal-wash: rgba(95, 179, 173, 0.10);
    --chart-copper-wash: rgba(238, 147, 73, 0.08);
    --chart-teal-start: #bfe3e0;
    --chart-teal-end: #3a7571;
    --chart-ramp-2: #7ab89a;
    --chart-ramp-3: #a8b578;
    --chart-ramp-4: #d3a95f;
    --chart-ramp-6: #b0784a;
    --chart-ramp-7: #6f6d6a;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f0eee9;
    --surface: #f0eee9;
    --surface-raised: #f8f6f2;
    --surface-sunken: #e6e3dc;
    --neu-dark: #d1cdc5;
    --neu-light: #ffffff;
    --text-primary: #302c27;
    --text-secondary: #4c4640;
    --text-muted: #696158;
    --text-faint: #70685f;
    --accent: #925018;
    --accent-hover: #713c10;
    --accent-dim: rgba(146, 80, 24, 0.11);
    --accent-line: rgba(146, 80, 24, 0.38);
    --select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23925018' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
    --success: #226b65;
    --success-dim: rgba(34, 107, 101, 0.11);
    --danger: #ac3650;
    --danger-dim: rgba(172, 54, 80, 0.10);
    --info: #345f8a;
    --info-dim: rgba(52, 95, 138, 0.10);
    --warning: #815719;
    --warning-dim: rgba(129, 87, 25, 0.10);
    --border: #d4cfc6;
    --border-soft: rgba(61, 48, 35, 0.12);
    --border-strong: #b1a99c;
    --surface-console: #eeece6;
    --surface-modal: #f8f6f2;
    --surface-outer: #e6e3dc;
    --surface-hub: #faf8f4;
    --surface-hover: #ddd8cf;
    --surface-gradient-top: #f8f6f2;
    --surface-gradient-bottom: #e7e3dc;
    --nav-text: #5e574f;
    --nav-muted: #696158;
    --shadow-deep: #d1cdc5;
    --shadow-highlight: #ffffff;
    --shadow-floating: rgba(67, 53, 34, 0.18);
    --shadow-menu: rgba(67, 53, 34, 0.20);
    --shadow-launcher: rgba(67, 53, 34, 0.22);
    --shadow-soft: rgba(67, 53, 34, 0.09);
    --overlay: rgba(37, 31, 24, 0.30);
    --overlay-launcher: rgba(37, 31, 24, 0.25);
    --rim: rgba(255, 255, 255, 0.85);
    --wash-faint: rgba(64, 46, 24, 0.025);
    --wash-soft: rgba(64, 46, 24, 0.045);
    --wash: rgba(64, 46, 24, 0.065);
    --scrollbar: #bcb4a7;
    --scrollbar-hover: #948978;
    --sage: #526a45;
    --positive: #347554;
    --lavender-ink: #99425d;
    --purple-ink: #725a92;
    --aqua: #256b70;
    --email-blue: #345f8a;
    --editor-link: #7b4396;
    --editor-invalid: #ac3650;
    --danger-line: rgba(172, 54, 80, 0.35);
    --info-line: rgba(52, 95, 138, 0.35);
    --funnel-shadow: #a9a296;
    --funnel-top: #ffffff;
    --funnel-mid: #f6f3ed;
    --funnel-bottom: #e3ded4;
    --chart-ink: #302c27;
    --chart-secondary: #4c4640;
    --chart-muted: #696158;
    --chart-grid: #d4cfc6;
    --chart-teal: #287c74;
    --chart-copper: #ae6025;
    --chart-neutral: #b3aa9d;
    --chart-teal-wash: rgba(40, 124, 116, 0.10);
    --chart-copper-wash: rgba(174, 96, 37, 0.10);
    --chart-teal-start: #89bcb6;
    --chart-teal-end: #205f59;
    --chart-ramp-2: #498c65;
    --chart-ramp-3: #778349;
    --chart-ramp-4: #a27a32;
    --chart-ramp-6: #915535;
    --chart-ramp-7: #807466;
}

/* This control sits outside the collapsing navigation, including on login. */
.appearance-control { order: 2; margin-left: 0.6rem; }
.appearance-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.35rem; height: 2.35rem; padding: 0; border: 0; border-radius: 50%;
    background: var(--surface); color: var(--text-muted); cursor: pointer;
    box-shadow: 3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light);
}
.appearance-toggle:hover { color: var(--accent); }
.appearance-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.appearance-toggle i { color: inherit; }
.appearance-toggle .appearance-sun { width: 1.25rem; height: 1.25rem; }
.appearance-toggle .appearance-moon { display: none; }
[data-theme="light"] .appearance-toggle .appearance-sun { display: none; }
[data-theme="light"] .appearance-toggle .appearance-moon { display: inline-block; }
@media (max-width: 1199.98px) {
    .appearance-control { order: 0; margin-left: auto; }
    /* The kit's full-screen overlay covered the appearance and close controls.
       Keep the Bootstrap collapse in the header's flow in either palette. */
    .site-header .navbar-collapse {
        flex-basis: 100%; position: static; opacity: 1;
        height: auto !important; overflow: visible;
        background: var(--surface); color: var(--text-secondary);
        box-shadow: none; animation: none; padding: 0.75rem 0;
    }
}