// Global colors

// Brand/accent — repointed to sideconvo's purple family (a full post-login
// shell reskin; supersedes the earlier biogrid-color-mapping convention, see
// docs/superpowers/specs/2026-09-11-post-login-shell-redesign-design.md §2.1).
// Values ported verbatim from sideconvo-wp-plugin/src/styles/tokens.css --color-primary*.
$secondary: #5f5bf3; // was #8134af
$secondary-light: #7b75f6; // was #b080cd
$secondary-dark: #4f46e5; // was #612783
$secondary-lighter: #eef2ff; // new — sideconvo --color-primary-lighter (active/hover tint bg)

// Body/heading text color — already near-identical to sideconvo's own
// --color-text-primary (#0F1629 vs biogrid's #131339); left unchanged.
$primary: #131339;
$primary-dark: #0e0e2b;

$red: #ff0606;
$red-dark: #bf0505;
$red-light: #ff9292;

// Dark-theme token layer (WP-4954) — CSS custom properties (not SCSS
// variables) so a value can actually change at runtime via the
// prefers-color-scheme media query below, something a compile-time Sass
// variable can't do. Light values here match the literal hex values these
// tokens replace exactly, so adopting them is a no-op for light-mode output.
// $primary/$secondary/$red stay plain Sass color literals on purpose - they're
// piped through Sass's own rgba($color, $alpha) in ~20 places across the app,
// which requires a real Sass color, not a var() the compiler can't evaluate.
//
// Values live in these two maps (single source of truth) so the automatic
// (prefers-color-scheme) path and the explicit admin_theme override path
// ([data-sfsync-theme] on <html>, set from the user's Appearance setting)
// can never drift out of sync with each other.
$sfsync-light-tokens: (
  "bg-canvas": #f9f9f9,
  "bg-surface": #fff,
  "bg-surface-translucent": rgba(249, 249, 249, 0.92),
  "text-primary": #131339,
  "text-secondary": #5b5b5b,
  "text-placeholder": #868686,
  "text-disabled": #878787,
  "border-field": #ddd,
  "border-default": #aeaeae26,
  "warning-bg": #fffaeb,
  "warning-border": #fec84b,
  "error-bg": #fff8f8,
  "success-bg": #ecfdf5,
  "icon-muted": rgba(0, 0, 0, 0.54),
  "icon-muted-hover-bg": rgba(0, 0, 0, 0.04),
  "icon-disabled": rgba(0, 0, 0, 0.26),
  "checkbox-unchecked": rgba(0, 0, 0, 0.4),
  "radio-unchecked": rgba(0, 0, 0, 0.6),
  "tooltip-bg": #f3f3f3,
  "nav-item-hover-bg": #f0f0f0,
);

$sfsync-dark-tokens: (
  "bg-canvas": #17171f,
  "bg-surface": #1f1f29,
  "bg-surface-translucent": rgba(23, 23, 31, 0.92),
  "text-primary": #f2f2f5,
  "text-secondary": #b3b3bd,
  "text-placeholder": #8a8a96,
  "text-disabled": #7a7a85,
  "border-field": #3a3a46,
  "border-default": #ffffff26,
  "warning-bg": #3a3116,
  "warning-border": #a37f2a,
  "error-bg": #402226,
  "success-bg": #16332a,
  "icon-muted": rgba(255, 255, 255, 0.7),
  "icon-muted-hover-bg": rgba(255, 255, 255, 0.08),
  "icon-disabled": rgba(255, 255, 255, 0.3),
  "checkbox-unchecked": rgba(255, 255, 255, 0.5),
  "radio-unchecked": rgba(255, 255, 255, 0.4),
  "tooltip-bg": #2a2a35,
  // Matches splash-screen-styles.scss's own --splash-bg-hover dark value,
  // already tuned against this same #1f1f29 surface color.
  "nav-item-hover-bg": #2a2a35,
);

// $prefix lets other stylesheets with their own token set (e.g.
// splash-screen-styles.scss's --splash-* tokens) reuse this same mixin
// instead of hand-rolling their own :root/media/override boilerplate.
@mixin sfsync-emit-tokens($tokens, $prefix: "sfsync") {
  @each $name, $value in $tokens {
    --#{$prefix}-#{$name}: #{$value};
  }
}

:root {
  @include sfsync-emit-tokens($sfsync-light-tokens);
}

@media (prefers-color-scheme: dark) {
  :root {
    @include sfsync-emit-tokens($sfsync-dark-tokens);
  }
}

// Explicit admin_theme override. A plain :root[attr] selector
// out-specificities `@media (...) { :root {...} }` (the media query doesn't
// add to the selector's own specificity), so these win regardless of the
// browser/OS scheme and regardless of source order - no !important needed.
// Absent (admin_theme === "automatic") the rules above keep governing.
:root[data-sfsync-theme="light"] {
  @include sfsync-emit-tokens($sfsync-light-tokens);
}

:root[data-sfsync-theme="dark"] {
  @include sfsync-emit-tokens($sfsync-dark-tokens);
}

// Text colors

$text-secondary: var(--sfsync-text-secondary);
$text-primary: var(--sfsync-text-primary);
$text-placeholder: var(--sfsync-text-placeholder);
$text-disabled: var(--sfsync-text-disabled);

// Button colors

$btn-disabled: #ededed;

// Background colors

$primary-bg: var(--sfsync-bg-surface);
$secondary-bg: var(--sfsync-bg-surface);
$error-bg: var(--sfsync-error-bg);
$success-bg: var(--sfsync-success-bg);

// Border colors

$border-field: var(--sfsync-border-field);
$border-default: var(--sfsync-border-default);

// Border styling / radius scale
// Ported from sideconvo-wp-plugin/src/styles/tokens.css --radius-*.
$border-radius: 8px; // was 6px — sideconvo --radius-base
$radius-sm: 6px;
$radius-base: 8px;
$radius-md: 12px;
$radius-lg: 16px;
$radius-xl: 24px;
$radius-2xl: 32px;
$radius-full: 9999px;

// Global spacing

$vertical-gap: 12px;

// Padding

$default-padding: 1.9rem;
$padding-sm: 1.1rem;
$padding-md: 1.5rem;
$padding-lg: 1.9rem;

// Spacing scale — 4px base grid, ported from sideconvo-wp-plugin/src/styles/tokens.css
// --space-*. Used by new/updated layout code (AppLayout, PageHeader, sidebar);
// the existing $padding-*/$default-padding above are untouched and still used
// by the Card-family components that remain in the codebase after this change.
$space-0: 0;
$space-1: 0.25rem; // 4px
$space-2: 0.5rem; // 8px
$space-3: 0.75rem; // 12px
$space-4: 1rem; // 16px
$space-5: 1.25rem; // 20px
$space-6: 1.5rem; // 24px
$space-8: 2rem; // 32px
$space-10: 2.5rem; // 40px
$space-12: 3rem; // 48px
$space-16: 4rem; // 64px

// Typography scale — ported from sideconvo-wp-plugin/src/styles/tokens.css.
$font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
  "Roboto", sans-serif;
$text-xs: 0.75rem; // 12px
$text-sm: 0.875rem; // 14px
$text-base: 1rem; // 16px
$text-lg: 1.125rem; // 18px
$text-xl: 1.25rem; // 20px
$text-2xl: 1.5rem; // 24px
$text-3xl: 1.875rem; // 30px
$weight-normal: 400;
$weight-medium: 500;
$weight-semibold: 600;
$weight-bold: 700;
$tracking-wide: 0.025em;
$tracking-wider: 0.05em;
$tracking-widest: 0.1em;

// Shadows — ported from sideconvo-wp-plugin/src/styles/abstracts/_variables.scss
// $shadows map (its 0,0,0-based SCSS shadow scale, not the navy-tinted CSS-var
// version in tokens.css — matches biogrid's existing black-tinted convention).
$shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

// Motion — ported from sideconvo-wp-plugin/src/styles/tokens.css.
$duration-fast: 150ms;
$duration-base: 300ms;
$duration-slow: 500ms;
$ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

// Z-index scale — ported from sideconvo-wp-plugin/src/styles/tokens.css. Use
// for any new stacking context (sidebar, popovers, overlays) instead of an
// ad hoc number.
$z-dropdown: 100;
$z-sticky: 200;
$z-fixed: 300;
$z-sidebar: 400;
$z-modal-backdrop: 500;
$z-modal: 600;
$z-popover: 700;
$z-toast: 800;
$z-tooltip: 900;

// ContentCard's own internal layers: its image/caption overlay content, and
// the badge that must render above both within the same card.
$z-card-content: 999;
$z-card-badge: 9999;

// Floating UI rendered inline (not portaled to the document root) that must
// escape whatever local stacking context it happens to be nested in - e.g.
// inside a Modal or a ContentCard - rather than compete with the page-level
// tiers above. A single shared tier: these never need to stack relative to
// one another, only above their own local siblings. Used by dropdown lists
// (Menu, Select) and Tooltip.
$z-floating-ui: 9999;

// The Feature-Locked/Upgrade popover's own content: must clear both
// $z-card-badge and $z-floating-ui, since it can render inside a
// ContentCard's own hover content (Grid Manager) or near a Select/Menu
// dropdown (Configuration Detail).
$z-feature-locked-popover: 10000;

// WP-admin-chrome geometry — named source of truth for the pixel values
// splash-screen-styles.scss independently hardcodes today (top/left offsets
// mirroring the WP admin bar height and admin menu width). AppLayout doesn't
// need these directly (it neutralizes #wpcontent padding and relies on
// normal document flow instead), but giving the numbers names here means a
// future WP admin-bar/menu dimension change only needs updating in one place.
$wp-adminbar-height: 32px;
$wp-adminbar-height-mobile: 46px;
$wp-adminmenu-width: 160px;
$wp-adminmenu-width-folded: 36px;

// Shared WP-admin-chrome vertical offset — single source of truth replacing
// the hardcoded `calc(100vh - 5.6rem)` previously duplicated across
// style.scss, iframe-styles.scss, and Iframe.tsx. Was 5.6rem
// (top admin bar + headroom for the wp-admin footer text below); reduced to
// just $wp-adminbar-height now that #wpbody-content's own 65px footer
// clearance is neutralized and #wpfooter hidden outright on this screen
// (style.scss) — that reserved headroom is otherwise a dead gap under our
// own full-height shell.
$shell-chrome-offset: $wp-adminbar-height;

// Our own plugin sidebar's width (AppLayout's __sidebar column). Named here,
// alongside the WP-admin-chrome geometry above, so a `position:fixed`
// element that needs to sit clear of BOTH the WP admin menu and our own
// sidebar (e.g. card-footer-styles.scss) can reference one source of truth
// instead of hardcoding this a second time.
$sfsync-sidebar-width: 300px;