/* Stockpile design tokens. Everything visual reads these variables from
   body.sp-shell. Skins (body.sp-skin-*) and dark mode (body.sp-mode-dark, or
   body.sp-mode-auto when the device prefers dark) override tokens only. The
   highlight color arrives as --sp-accent and the user's base spacing as
   --sp-space-user from an inline style printed by Core\Appearance. Loaded by the
   app shell and the login screen. */

/* =========================================================================
   1. Tokens: Clean skin, light mode (the defaults)
   ========================================================================= */
body.sp-shell {
	--sp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
	--sp-font-heading: var(--sp-font);
	--sp-font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	--sp-font-size: 13.5px;

	--sp-bg: #f4f6fa;
	--sp-surface: #ffffff;
	--sp-surface-2: #f8fafc;
	--sp-border: #e4e7ec;
	--sp-border-strong: #cfd4dc;
	--sp-text: #101828;
	--sp-text-2: #344054;
	--sp-muted: #667085;
	--sp-placeholder: #98a2b3;

	--sp-primary: var(--sp-accent, #2563eb);
	--sp-primary-hover: color-mix(in srgb, var(--sp-primary) 82%, black);
	--sp-primary-soft: color-mix(in srgb, var(--sp-primary) 12%, var(--sp-surface));
	--sp-primary-ring: color-mix(in srgb, var(--sp-primary) 30%, transparent);
	--sp-on-primary: #ffffff;

	/* WordPress core components on the login screen (buttons, focus rings) read these. */
	--wp-admin-theme-color: var(--sp-primary);
	--wp-admin-theme-color-darker-10: var(--sp-primary-hover);
	--wp-admin-theme-color-darker-20: var(--sp-primary-hover);
	--wp-admin-border-width-focus: 2px;

	--sp-success-bg: #ecfdf3; --sp-success-fg: #027a48; --sp-success-border: #a6f4c5;
	--sp-warn-bg: #fffaeb;    --sp-warn-fg: #b54708;    --sp-warn-border: #fedf89;
	--sp-danger-bg: #fef3f2;  --sp-danger-fg: #b42318;  --sp-danger-border: #fecdca;
	--sp-neutral-bg: #f2f4f7; --sp-neutral-fg: #475467;

	--sp-radius: 10px;
	--sp-radius-sm: 8px;
	--sp-radius-pill: 999px;
	--sp-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.08);
	--sp-shadow-lg: 0 12px 24px -8px rgba(16, 24, 40, 0.18), 0 4px 8px -4px rgba(16, 24, 40, 0.08);

	--sp-sidebar-w: 232px;
	--sp-sidebar-bg: var(--sp-surface);
	--sp-sidebar-border: var(--sp-border);
	--sp-sidebar-text: var(--sp-text-2);
	--sp-sidebar-icon: var(--sp-muted);
	--sp-sidebar-hover-bg: var(--sp-surface-2);
	--sp-sidebar-hover-text: var(--sp-text);
	--sp-sidebar-active-bg: var(--sp-primary-soft);
	--sp-sidebar-active-text: var(--sp-primary);
	--sp-sidebar-radius: 0;

	--sp-topbar-bg: var(--sp-surface);
	--sp-topbar-border: var(--sp-border);
	--sp-topbar-text: var(--sp-text-2);
	--sp-topbar-title: var(--sp-text);
	--sp-topbar-hover-bg: var(--sp-surface-2);
	--sp-topbar-hover-text: var(--sp-primary);

	--sp-table-head-bg: var(--sp-surface-2);
	--sp-table-head-text: var(--sp-muted);
	--sp-table-head-transform: uppercase;
	--sp-table-head-size: 12px;
	--sp-heading-weight: 700;
	--sp-heading-size: 24px;
	--sp-heading-spacing: -0.02em;

	/* Spacing scale. --sp-space-user comes from the Appearance page (inline on :root);
	   skins may scale it with --sp-space-scale. Everything else derives from --sp-sp. */
	--sp-space-scale: 1;
	--sp-sp: calc(var(--sp-space-user, 15px) * var(--sp-space-scale));
	--sp-space-xs: calc(var(--sp-sp) * 0.25);
	--sp-space-sm: calc(var(--sp-sp) * 0.5);
	--sp-space-md: var(--sp-sp);
	--sp-space-lg: calc(var(--sp-sp) * 1.5);
	--sp-space-xl: calc(var(--sp-sp) * 2);
	--sp-control-h: calc(28px + var(--sp-space-sm));
	--sp-control-pad: calc(var(--sp-space-sm) + 4px);
	--sp-cell-pad: calc(var(--sp-space-sm) + 2px) var(--sp-space-md);
	--sp-content-pad: var(--sp-space-xl);
}

/* =========================================================================
   2. Skins
   ========================================================================= */

/* Slate: dark navy sidebar and top bar, bright workspace, sharper corners. */
body.sp-shell.sp-skin-slate {
	--sp-bg: #f1f5f9;
	--sp-surface-2: #f8fafc;
	--sp-border: #e2e8f0;
	--sp-border-strong: #cbd5e1;
	--sp-radius: 6px;
	--sp-radius-sm: 5px;
	--sp-sidebar-bg: #0f172a;
	--sp-sidebar-border: #1e293b;
	--sp-sidebar-text: #cbd5e1;
	--sp-sidebar-icon: #94a3b8;
	--sp-sidebar-hover-bg: #1e293b;
	--sp-sidebar-hover-text: #ffffff;
	--sp-sidebar-active-bg: color-mix(in srgb, var(--sp-primary) 28%, #0f172a);
	--sp-sidebar-active-text: #ffffff;
	--sp-topbar-bg: #0f172a;
	--sp-topbar-border: #1e293b;
	--sp-topbar-text: #cbd5e1;
	--sp-topbar-title: #ffffff;
	--sp-topbar-hover-bg: #1e293b;
	--sp-topbar-hover-text: #ffffff;
	--sp-table-head-bg: #f8fafc;
	--sp-heading-size: 22px;
	--sp-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Paper: warm parchment, serif headings, flat borders, no shadows. */
body.sp-shell.sp-skin-paper {
	--sp-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Segoe UI", sans-serif;
	--sp-font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--sp-font-size: 14px;
	--sp-bg: #f6f1e7;
	--sp-surface: #fffdf8;
	--sp-surface-2: #f7f2e8;
	--sp-border: #e6dcc8;
	--sp-border-strong: #cdbfa5;
	--sp-text: #2b2520;
	--sp-text-2: #4a4038;
	--sp-muted: #7a6f63;
	--sp-placeholder: #aa9d8d;
	--sp-success-bg: #eaf3e4; --sp-success-fg: #3b6a2a; --sp-success-border: #c9ddba;
	--sp-warn-bg: #fbf1dc;    --sp-warn-fg: #8a5a12;    --sp-warn-border: #ecd6a4;
	--sp-danger-bg: #f9e6e0;  --sp-danger-fg: #933a24;  --sp-danger-border: #ecc3b6;
	--sp-neutral-bg: #efe8da; --sp-neutral-fg: #5c5248;
	--sp-radius: 14px;
	--sp-radius-sm: 10px;
	--sp-shadow: none;
	--sp-shadow-lg: 0 10px 24px -10px rgba(60, 40, 10, 0.25);
	--sp-sidebar-bg: #f6f1e7;
	--sp-sidebar-border: #e6dcc8;
	--sp-sidebar-text: #4a4038;
	--sp-sidebar-icon: #8a7d6e;
	--sp-sidebar-hover-bg: #efe8da;
	--sp-sidebar-hover-text: #2b2520;
	--sp-sidebar-active-bg: color-mix(in srgb, var(--sp-primary) 14%, #f6f1e7);
	--sp-sidebar-active-text: var(--sp-primary-hover);
	--sp-topbar-bg: #fffdf8;
	--sp-topbar-border: #e6dcc8;
	--sp-topbar-text: #4a4038;
	--sp-topbar-title: #2b2520;
	--sp-topbar-hover-bg: #f7f2e8;
	--sp-table-head-bg: #f7f2e8;
	--sp-table-head-text: #7a6f63;
	--sp-table-head-transform: none;
	--sp-table-head-size: 13px;
	--sp-heading-weight: 600;
	--sp-heading-size: 28px;
	--sp-heading-spacing: 0;
	--sp-space-scale: 1.1;
}

/* Console: dense, square, monospace labels, black top bar, grey sidebar. */
body.sp-shell.sp-skin-console {
	--sp-font: "Segoe UI", system-ui, Roboto, Arial, sans-serif;
	--sp-font-heading: var(--sp-font-mono);
	--sp-font-size: 13px;
	--sp-bg: #ececec;
	--sp-surface: #ffffff;
	--sp-surface-2: #f3f3f3;
	--sp-border: #d4d4d4;
	--sp-border-strong: #a8a8a8;
	--sp-text: #111111;
	--sp-text-2: #2e2e2e;
	--sp-muted: #6a6a6a;
	--sp-placeholder: #9a9a9a;
	--sp-neutral-bg: #e4e4e4; --sp-neutral-fg: #333333;
	--sp-radius: 2px;
	--sp-radius-sm: 2px;
	--sp-radius-pill: 2px;
	--sp-shadow: none;
	--sp-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.18);
	--sp-sidebar-w: 208px;
	--sp-sidebar-bg: #e9e9e9;
	--sp-sidebar-border: #cfcfcf;
	--sp-sidebar-text: #2e2e2e;
	--sp-sidebar-icon: #5a5a5a;
	--sp-sidebar-hover-bg: #dcdcdc;
	--sp-sidebar-hover-text: #111111;
	--sp-sidebar-active-bg: var(--sp-primary);
	--sp-sidebar-active-text: var(--sp-on-primary);
	--sp-sidebar-radius: 0;
	--sp-topbar-bg: #111111;
	--sp-topbar-border: #000000;
	--sp-topbar-text: #d0d0d0;
	--sp-topbar-title: #ffffff;
	--sp-topbar-hover-bg: #2a2a2a;
	--sp-topbar-hover-text: #ffffff;
	--sp-table-head-bg: #f3f3f3;
	--sp-table-head-text: #444444;
	--sp-table-head-size: 11.5px;
	--sp-heading-weight: 600;
	--sp-heading-size: 18px;
	--sp-heading-spacing: 0;
	--sp-space-scale: 0.7;
}

/* =========================================================================
   3. Dark mode (explicit, or device preference when mode is "auto")
   ========================================================================= */
body.sp-shell.sp-mode-dark,
html.sp-dark-pref body.sp-shell.sp-mode-auto {
	--sp-bg: #0b1220;
	--sp-surface: #111a2e;
	--sp-surface-2: #172238;
	--sp-border: #243049;
	--sp-border-strong: #34415c;
	--sp-text: #e6ebf5;
	--sp-text-2: #c3cbdb;
	--sp-muted: #8b96ab;
	--sp-placeholder: #5f6b82;
	--sp-primary-hover: color-mix(in srgb, var(--sp-primary) 80%, white);
	--sp-success-bg: #0f2e22; --sp-success-fg: #4ade80; --sp-success-border: #1f5a3c;
	--sp-warn-bg: #3a2a0a;    --sp-warn-fg: #fbbf24;    --sp-warn-border: #6b4e0f;
	--sp-danger-bg: #3b1414;  --sp-danger-fg: #f87171;  --sp-danger-border: #7a2a2a;
	--sp-neutral-bg: #1f2a40; --sp-neutral-fg: #c3cbdb;
	--sp-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	--sp-shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.6);
	--sp-sidebar-bg: #0e1627;
	--sp-sidebar-border: #1c2740;
	--sp-sidebar-text: #c3cbdb;
	--sp-sidebar-icon: #8b96ab;
	--sp-sidebar-hover-bg: #172238;
	--sp-sidebar-hover-text: #ffffff;
	--sp-sidebar-active-bg: color-mix(in srgb, var(--sp-primary) 26%, #0e1627);
	--sp-sidebar-active-text: #ffffff;
	--sp-topbar-bg: #0e1627;
	--sp-topbar-border: #1c2740;
	--sp-topbar-text: #c3cbdb;
	--sp-topbar-title: #ffffff;
	--sp-topbar-hover-bg: #172238;
	--sp-topbar-hover-text: #ffffff;
	--sp-table-head-bg: #172238;
	--sp-table-head-text: #8b96ab;
	color-scheme: dark;
}
body.sp-shell.sp-mode-dark.sp-skin-slate,
html.sp-dark-pref body.sp-shell.sp-mode-auto.sp-skin-slate {
	--sp-bg: #020617; --sp-surface: #0f172a; --sp-surface-2: #1e293b; --sp-border: #1e293b; --sp-border-strong: #334155;
	--sp-sidebar-bg: #020617; --sp-topbar-bg: #020617; --sp-sidebar-border: #1e293b; --sp-topbar-border: #1e293b;
	--sp-sidebar-hover-bg: #1e293b; --sp-topbar-hover-bg: #1e293b; --sp-table-head-bg: #1e293b;
}
body.sp-shell.sp-mode-dark.sp-skin-paper,
html.sp-dark-pref body.sp-shell.sp-mode-auto.sp-skin-paper {
	--sp-bg: #1a1612; --sp-surface: #23201b; --sp-surface-2: #2b2721; --sp-border: #3a342c; --sp-border-strong: #52493d;
	--sp-text: #efe7da; --sp-text-2: #d6ccbc; --sp-muted: #a3978a; --sp-placeholder: #6d6356;
	--sp-neutral-bg: #332e27; --sp-neutral-fg: #d6ccbc;
	--sp-sidebar-bg: #1a1612; --sp-topbar-bg: #23201b; --sp-sidebar-border: #3a342c; --sp-topbar-border: #3a342c;
	--sp-sidebar-text: #d6ccbc; --sp-sidebar-icon: #a3978a; --sp-sidebar-hover-bg: #2b2721; --sp-sidebar-hover-text: #efe7da;
	--sp-sidebar-active-bg: color-mix(in srgb, var(--sp-primary) 24%, #1a1612); --sp-sidebar-active-text: #efe7da;
	--sp-topbar-text: #d6ccbc; --sp-topbar-title: #efe7da; --sp-topbar-hover-bg: #2b2721; --sp-topbar-hover-text: #efe7da;
	--sp-table-head-bg: #2b2721; --sp-table-head-text: #a3978a;
}
body.sp-shell.sp-mode-dark.sp-skin-console,
html.sp-dark-pref body.sp-shell.sp-mode-auto.sp-skin-console {
	--sp-bg: #121212; --sp-surface: #1b1b1b; --sp-surface-2: #242424; --sp-border: #333333; --sp-border-strong: #4d4d4d;
	--sp-text: #f0f0f0; --sp-text-2: #d6d6d6; --sp-muted: #9a9a9a; --sp-placeholder: #666666;
	--sp-neutral-bg: #2e2e2e; --sp-neutral-fg: #d6d6d6;
	--sp-sidebar-bg: #1b1b1b; --sp-sidebar-border: #333333; --sp-sidebar-text: #d6d6d6; --sp-sidebar-icon: #9a9a9a;
	--sp-sidebar-hover-bg: #2a2a2a; --sp-sidebar-hover-text: #ffffff;
	--sp-topbar-bg: #000000; --sp-topbar-border: #000000; --sp-topbar-hover-bg: #222222;
	--sp-table-head-bg: #242424; --sp-table-head-text: #9a9a9a;
}

/* The scrollbar's width is reserved from the first paint, so nothing reflows when it appears. */
html { scrollbar-gutter: stable; }