/**
 * Takeover / FSE-style workspace theme tokens.
 * Override before importing app styles, e.g.:
 *   @use 'theme' with ($mod-takeover-canvas-gap: 16px);
 *
 * Style-kit values: docs/contributors/23-style-guide.md
 */
@use 'radii' as *;
@use 'spacing' as *;

// ---------------------------------------------------------------------------
// Layout (style kit)
// ---------------------------------------------------------------------------
$mod-se-gut: $mod-space-16 !default;
// The header grid (`_topbar.scss`) uses the same widths, so its columns stay
// over the rail and the settings panel.
$mod-se-rail-w: 112px !default;
$mod-se-panel-w: 400px !default;

// ---------------------------------------------------------------------------
// Canvas
// ---------------------------------------------------------------------------
// Horizontal inset after the sidebar and gap between aux + preview — use the same value so spacing is even.
$mod-takeover-canvas-gap: $mod-space-12 !default;
// The takeover stage behind the gallery (canvas "1 · Editor" main area). It
// stays dark in both appearances, so its ink is the canvas's dark ink.
$mod-takeover-stage-bg: #1c1b19 !default;
$mod-takeover-stage-ink: #f2efe8 !default;
$mod-takeover-stage-ink-muted: #aaa598 !default;

// ---------------------------------------------------------------------------
// Dark UI: sidebar body, menus — style kit --chrome / --line
// ---------------------------------------------------------------------------
$mod-takeover-sidebar-bg: #17181b !default;
$mod-takeover-chrome-border: #2c2e34 !default;
$mod-takeover-menu-surface-bg: #1d1e22 !default;

// Primary category list + Layout hub drill rows (same vertical rhythm).
$mod-takeover-sidebar-list-row-pad-y: $mod-space-10 !default;
$mod-takeover-sidebar-list-row-min-height: $mod-space-48 !default;

// ---------------------------------------------------------------------------
// Dark chrome
// ---------------------------------------------------------------------------
$mod-takeover-ink-on-dark-strong: rgb(255 255 255 / 92%) !default;
$mod-takeover-dark-hover-overlay: rgb(255 255 255 / 8%) !default;

// ---------------------------------------------------------------------------
// Light surfaces — preview card, aux panel, reorder panel (style kit)
// ---------------------------------------------------------------------------
$mod-takeover-surface-raised: #fff !default;
$mod-takeover-surface-muted: #f0f0ed !default;

// ---------------------------------------------------------------------------
// Light theme — borders & typography (style kit ink / line)
// ---------------------------------------------------------------------------
$mod-takeover-border-light: #e3e3de !default;
$mod-takeover-border-light-muted: #edede8 !default;
$mod-takeover-border-dashed: #c8c8cd !default;
$mod-takeover-text-strong: #16161a !default;
$mod-takeover-text-base: #56565e !default;
$mod-takeover-text-muted: #56565e !default;
$mod-takeover-text-subtle: #8b8b93 !default;
$mod-takeover-thumb-bg: #ddd !default;
$mod-takeover-placeholder-stripe-a: #e8e8e8 !default;
$mod-takeover-placeholder-stripe-b: #f0f0f0 !default;
$mod-takeover-light-hover-overlay: rgb(0 0 0 / 6%) !default;

// ---------------------------------------------------------------------------
// Preview card toolbar
// ---------------------------------------------------------------------------
$mod-takeover-preview-toolbar-bg: $mod-takeover-surface-raised !default;
$mod-takeover-preview-toolbar-border: $mod-takeover-border-light !default;

// ---------------------------------------------------------------------------
// Workspace: reorder panel head (aligned top → first border)
// ---------------------------------------------------------------------------
$mod-takeover-workspace-panel-head-min-height: $mod-space-48 !default;

// ---------------------------------------------------------------------------
// Preview floating card
// ---------------------------------------------------------------------------
$mod-takeover-preview-card-border: #e3e3de !default;

// ---------------------------------------------------------------------------
// Reorder row — dragging elevation
// ---------------------------------------------------------------------------
$mod-takeover-reorder-drag-shadow: 0 4px 16px rgb(0 0 0 / 12%) !default;

// ---------------------------------------------------------------------------
// Shell chrome — loading text
// ---------------------------------------------------------------------------
$mod-takeover-status-muted: #646970 !default;

// ---------------------------------------------------------------------------
// Focus ring (keyboard), non-accent
// ---------------------------------------------------------------------------
$mod-takeover-focus-ring-neutral: #9ec2e6 !default;

// ---------------------------------------------------------------------------
// Pro upsell badge (sorting / Add New pills)
// ---------------------------------------------------------------------------
$mod-takeover-pro-badge-bg-mix: #2271b1 !default;
$mod-takeover-pro-badge-border-mix: #3582c4 !default;

// ---------------------------------------------------------------------------
// Live preview — admin controls on image tiles (dark stack)
// ---------------------------------------------------------------------------
$mod-takeover-admin-trigger-surface: rgb(255 255 255 / 94%) !default;
$mod-takeover-admin-trigger-ink: #1d2327 !default;
$mod-takeover-admin-trigger-shadow: 0 1px 4px rgb(0 0 0 / 22%),
	0 0 0 1px rgb(0 0 0 / 8%) !default;

// ---------------------------------------------------------------------------
// Motion (FSE panel + card)
// ---------------------------------------------------------------------------
$mod-takeover-transition-workspace: 0.12s ease !default;
$mod-takeover-transition-panel: 0.22s cubic-bezier(0.32, 0.72, 0, 1) !default;