@use 'theme' as theme;

// Semantic appearance tokens — set on `.modula-takeover__app[data-appearance]`.
// Canonical roles: docs/contributors/23-style-guide.md (style kit → --mod-se-*).
// They serve what renders outside an admin-ui scope (the canvas, the stage,
// the shell's own chrome); inside the scope, use `--modula-admin-*` (ADR 0050).
// The style kit's blue accent is retired: admin-ui uses ink.

.modula-takeover__app {
	--mod-se-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'JetBrains Mono', Menlo, Consolas,
		monospace;
	--mod-se-rail-w: #{theme.$mod-se-rail-w};
	--mod-se-panel-w: #{theme.$mod-se-panel-w};
	--mod-se-duration-fast: 0.12s;
	// The selected tile in every gallery type, and the Freeform selection frame.
	--mod-se-selection-outline: 2px solid var(--mod-se-selection);
}

.modula-takeover__app[data-appearance='light'] {
	color-scheme: light;

	// --- Style kit surfaces ---
	--mod-se-stage: #e9e9e5;
	--mod-se-chrome: #f6f6f4;
	--mod-se-chrome-2: #f0f0ed;
	--mod-se-surface: #fff;
	--mod-se-line: #e3e3de;
	--mod-se-line-soft: #edede8;

	// --- Style kit ink ---
	--mod-se-ink: #16161a;
	--mod-se-ink-2: #56565e;
	--mod-se-ink-3: #8b8b93;
	--mod-se-off: #c8c8cd;

	// --- Canvas selection (Freeform tile outline, handles, size badge) ---
	--mod-se-selection: #14937c;
	--mod-se-selection-ink: #fff;

	// --- Style kit meaning ---
	--mod-se-danger: #b4362b;

	// --- Elevation ---
	--mod-se-shadow-md: 0 4px 22px rgb(0 0 0 / 12%), 0 0 0 1px rgb(0 0 0 / 4%);

	// --- Legacy shell aliases (wired to style kit) ---
	--mod-se-sidebar-bg: var(--mod-se-chrome);
	--mod-se-sidebar-ink: var(--mod-se-ink);
	--mod-se-sidebar-ink-muted: var(--mod-se-ink-2);
	--mod-se-chrome-bg: var(--mod-se-chrome);
	--mod-se-chrome-border: var(--mod-se-line);
	--mod-se-chrome-ink-secondary: var(--mod-se-ink-2);
	--mod-se-hover-overlay: rgb(0 0 0 / 6%);
	--mod-se-menu-surface-bg: var(--mod-se-chrome-2);
	--mod-se-flyout-bg: var(--mod-se-surface);
	--mod-se-flyout-ink: var(--mod-se-ink);
	--mod-se-flyout-border: var(--mod-se-line);
	--mod-se-flyout-row-hover: var(--mod-se-chrome-2);
	--mod-se-shell-ink: var(--mod-se-ink);
	--mod-se-status-muted: var(--mod-se-ink-3);
	--mod-se-metabox-ink: var(--mod-se-ink);
	--mod-se-metabox-border: var(--mod-se-stage);
	--mod-se-metabox-tab-border: var(--mod-se-line);
	--mod-se-palette-backdrop: rgb(0 0 0 / 45%);
	--mod-se-palette-panel-bg: var(--mod-se-surface);
	--mod-se-palette-ink: var(--mod-se-ink);
	--mod-se-palette-ink-muted: var(--mod-se-ink-2);
	--mod-se-palette-ink-faint: var(--mod-se-ink-3);
	--mod-se-palette-border: var(--mod-se-line);
	--mod-se-palette-input-bg: var(--mod-se-chrome-2);
	--mod-se-palette-input-border: var(--mod-se-line);
	--mod-se-palette-item-hover: var(--mod-se-hover-overlay);
	--mod-se-preview-card-filter: none;
	--mod-se-preview-bg: var(--mod-se-surface);
	--mod-se-preview-toolbar-bg: var(--mod-se-chrome);
	--mod-se-preview-toolbar-border: var(--mod-se-line);
	--mod-se-preview-border-dashed: var(--mod-se-off);
	--mod-se-preview-ink: var(--mod-se-ink);
	--mod-se-preview-ink-muted: var(--mod-se-ink-2);
	--mod-se-preview-ink-secondary: var(--mod-se-ink-2);
	--mod-se-preview-ink-subtle: var(--mod-se-ink-3);
	--mod-se-preview-segment-bg: var(--mod-se-chrome-2);
	--mod-se-preview-segment-border: var(--mod-se-line);
	--mod-se-preview-segment-active-bg: var(--mod-se-surface);
	--mod-se-preview-card-border: var(--mod-se-line);
	--mod-se-aux-surface: var(--mod-se-chrome-2);
	--mod-se-aux-surface-raised: var(--mod-se-surface);
	--mod-se-aux-ink: var(--mod-se-ink);
	--mod-se-aux-ink-muted: var(--mod-se-ink-2);
	--mod-se-aux-border-muted: var(--mod-se-line-soft);
	--mod-se-aux-border-strong: var(--mod-se-line);
	--mod-se-aux-hover-overlay: var(--mod-se-hover-overlay);
}

.modula-takeover__app[data-appearance='dark'] {
	color-scheme: dark;

	// --- Style kit surfaces ---
	--mod-se-stage: #101114;
	--mod-se-chrome: #17181b;
	--mod-se-chrome-2: #1d1e22;
	--mod-se-surface: #202126;
	--mod-se-line: #2c2e34;
	--mod-se-line-soft: #26282d;

	// --- Style kit ink ---
	--mod-se-ink: #ececef;
	--mod-se-ink-2: #a2a2ac;
	--mod-se-ink-3: #74747e;
	--mod-se-off: #45464e;

	// --- Canvas selection: drawn on photos, so the same in both themes ---
	--mod-se-selection: #14937c;
	--mod-se-selection-ink: #fff;

	// --- Style kit meaning ---
	--mod-se-danger: #f08a7e;

	// --- Elevation ---
	--mod-se-shadow-md: 0 4px 22px rgb(0 0 0 / 45%), 0 0 0 1px rgb(255 255 255 / 4%);

	// --- Legacy shell aliases ---
	--mod-se-sidebar-bg: var(--mod-se-chrome);
	--mod-se-sidebar-ink: var(--mod-se-ink);
	--mod-se-sidebar-ink-muted: var(--mod-se-ink-2);
	--mod-se-chrome-bg: var(--mod-se-chrome);
	--mod-se-chrome-border: var(--mod-se-line);
	--mod-se-chrome-ink-secondary: var(--mod-se-ink-2);
	--mod-se-hover-overlay: rgb(255 255 255 / 8%);
	--mod-se-menu-surface-bg: var(--mod-se-chrome-2);
	--mod-se-flyout-bg: var(--mod-se-surface);
	--mod-se-flyout-ink: var(--mod-se-ink);
	--mod-se-flyout-border: var(--mod-se-line);
	--mod-se-flyout-row-hover: var(--mod-se-hover-overlay);
	--mod-se-shell-ink: var(--mod-se-ink);
	--mod-se-status-muted: var(--mod-se-ink-3);
	--mod-se-metabox-ink: var(--mod-se-ink);
	--mod-se-metabox-border: var(--mod-se-line);
	--mod-se-metabox-tab-border: var(--mod-se-line);
	--mod-se-palette-backdrop: rgb(0 0 0 / 52%);
	--mod-se-palette-panel-bg: var(--mod-se-surface);
	--mod-se-palette-ink: var(--mod-se-ink);
	--mod-se-palette-ink-muted: var(--mod-se-ink-2);
	--mod-se-palette-ink-faint: var(--mod-se-ink-3);
	--mod-se-palette-border: var(--mod-se-line);
	--mod-se-palette-input-bg: var(--mod-se-chrome-2);
	--mod-se-palette-input-border: var(--mod-se-line);
	--mod-se-palette-item-hover: var(--mod-se-hover-overlay);
	--mod-se-preview-card-filter: none;
	--mod-se-preview-bg: var(--mod-se-surface);
	--mod-se-preview-toolbar-bg: var(--mod-se-chrome);
	--mod-se-preview-toolbar-border: var(--mod-se-line);
	--mod-se-preview-border-dashed: var(--mod-se-off);
	--mod-se-preview-ink: var(--mod-se-ink);
	--mod-se-preview-ink-muted: var(--mod-se-ink-2);
	--mod-se-preview-ink-secondary: var(--mod-se-ink-2);
	--mod-se-preview-ink-subtle: var(--mod-se-ink-3);
	--mod-se-preview-segment-bg: var(--mod-se-chrome-2);
	--mod-se-preview-segment-border: var(--mod-se-line);
	--mod-se-preview-segment-active-bg: var(--mod-se-surface);
	--mod-se-preview-card-border: var(--mod-se-line);
	--mod-se-aux-surface: var(--mod-se-chrome-2);
	--mod-se-aux-surface-raised: var(--mod-se-surface);
	--mod-se-aux-ink: var(--mod-se-ink);
	--mod-se-aux-ink-muted: var(--mod-se-ink-2);
	--mod-se-aux-border-muted: var(--mod-se-line-soft);
	--mod-se-aux-border-strong: var(--mod-se-line);
	--mod-se-aux-hover-overlay: var(--mod-se-hover-overlay);
}