/*
 * Moka.Red — Combined Global Stylesheet
 *
 * Includes: CSS reset, theme token fallbacks, and text utilities.
 * Auto-injected by MokaThemeProvider via <HeadContent>.
 * Consumers should NOT need to add <link> tags manually.
 */

/* ===== Minimal CSS Reset ===== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	overflow-wrap: break-word;
	margin: 0;
}

/* Sortable ghost — injected to document.body during drag, outside scoped CSS */
.moka-sortable-ghost {
	box-shadow: var(--moka-shadow-popup);
	border-radius: var(--moka-radius-sm, 4px);
	opacity: 0.9;
	background: var(--moka-color-surface, #0c0c10);
	rotate: 1deg;
}

.moka-sortable-placeholder {
	border: 2px dashed var(--moka-color-primary, #d32f2f);
	border-radius: var(--moka-radius-sm, 4px);
	background: color-mix(in srgb, var(--moka-color-primary, #d32f2f) 6%, transparent);
	opacity: 0.5;
}

/* ===== CSS Custom Properties — Light Theme Defaults ===== */
/* Fallback values when components are used without MokaThemeProvider. */
/* When MokaThemeProvider is present, its inline style overrides these. */

:root {
	/* Primary */
	--moka-color-primary: #d32f2f;
	--moka-color-primary-light: #ff6659;
	--moka-color-primary-dark: #9a0007;
	--moka-color-on-primary: #ffffff;

	/* Secondary */
	--moka-color-secondary: #455a64;
	--moka-color-secondary-light: #718792;
	--moka-color-secondary-dark: #1c313a;
	--moka-color-on-secondary: #ffffff;

	/* Surface & background */
	--moka-color-surface: #ffffff;
	--moka-color-surface-variant: #f5f5f5;
	--moka-color-on-surface: #1c1b1f;
	--moka-color-on-surface-variant: #666666;
	--moka-color-background: #fafafa;
	--moka-color-on-background: #1c1b1f;

	/* Semantic */
	--moka-color-error: #b00020;
	--moka-color-on-error: #ffffff;
	--moka-color-warning: #f57c00;
	--moka-color-on-warning: #ffffff;
	--moka-color-success: #2e7d32;
	--moka-color-on-success: #ffffff;
	--moka-color-info: #0288d1;
	--moka-color-on-info: #ffffff;

	/* Outlines */
	--moka-color-outline: #c4c4c4;
	--moka-color-outline-variant: #e0e0e0;

	/* Typography */
	--moka-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--moka-font-family-mono: 'JetBrains Mono', 'Cascadia Code', 'SF Mono', Menlo, monospace;
	--moka-font-size-xs: 0.6875rem;
	--moka-font-size-sm: 0.75rem;
	--moka-font-size-base: 0.8125rem;
	--moka-font-size-md: 0.875rem;
	--moka-font-size-lg: 1rem;
	--moka-font-size-xl: 1.25rem;
	--moka-font-size-xxl: 1.5rem;
	--moka-line-height-tight: 1.2;
	--moka-line-height-base: 1.4;
	--moka-line-height-relaxed: 1.6;
	--moka-font-weight-light: 300;
	--moka-font-weight-normal: 400;
	--moka-font-weight-medium: 500;
	--moka-font-weight-semibold: 600;
	--moka-font-weight-bold: 700;

	/* Spacing (dense) */
	--moka-spacing-xxs: 0.125rem;
	--moka-spacing-xs: 0.25rem;
	--moka-spacing-sm: 0.375rem;
	--moka-spacing-md: 0.5rem;
	--moka-spacing-lg: 0.75rem;
	--moka-spacing-xl: 1rem;
	--moka-spacing-xxl: 1.5rem;

	/* Border radius — sharp corners, max 12px for modals */
	--moka-radius-none: 0;
	--moka-radius-sm: 4px;
	--moka-radius-md: 8px;
	--moka-radius-lg: 10px;
	--moka-radius-xl: 12px;
	--moka-radius-full: 9999px;

	/* Transitions — fast and subtle */
	--moka-transition-fast: 120ms ease;
	--moka-transition-normal: 150ms ease;
	--moka-transition-slow: 200ms ease;

	/* Elevation / box-shadow scale */
	--moka-shadow-0: none;
	--moka-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
	--moka-shadow-2: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
	--moka-shadow-3: 0 10px 15px rgba(0, 0, 0, 0.07), 0 4px 6px rgba(0, 0, 0, 0.05);
	--moka-shadow-4: 0 20px 25px rgba(0, 0, 0, 0.08), 0 8px 10px rgba(0, 0, 0, 0.04);
	--moka-shadow-popup: 0 4px 12px rgba(0, 0, 0, 0.15);
	--moka-shadow-popup-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
	--moka-shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.2);
	--moka-shadow-subtle: 0 1px 4px rgba(0, 0, 0, 0.1);

	/* Component heights */
	--moka-height-statusbar: 22px;
	--moka-height-toolbar: 40px;
	--moka-height-toolbar-dense: 32px;

	/* Z-index scale */
	--moka-z-dropdown: 1000;
	--moka-z-sticky: 1020;
	--moka-z-fixed: 1030;
	--moka-z-modal-backdrop: 1040;
	--moka-z-modal: 1050;
	--moka-z-popover: 1060;
	--moka-z-tooltip: 1070;
	--moka-z-appbar: 1100;

	/* Semantic state tokens */
	--moka-opacity-disabled: 0.4;
	--moka-opacity-hover: 0.08;
	--moka-focus-color: var(--moka-color-primary);
	--moka-focus-width: 2px;
	--moka-border-width: 1px;

	/* Extended surface scale */
	--moka-color-surface-hover: #f0f0f0;
	--moka-color-surface-2: #f8f8f8;
	--moka-color-surface-3: #eeeeee;

	/* Accent glow tokens */
	--moka-color-primary-glow: rgba(211, 47, 47, 0.08);
	--moka-color-primary-glow-md: rgba(211, 47, 47, 0.15);
	--moka-color-primary-glow-strong: rgba(211, 47, 47, 0.25);
	--moka-color-primary-border: rgba(211, 47, 47, 0.20);
	--moka-color-primary-border-dim: rgba(211, 47, 47, 0.08);

	/* Text scale (tertiary/quaternary) */
	--moka-color-on-surface-tertiary: #888888;
	--moka-color-on-surface-quaternary: #bbbbbb;

	/* Focus ring */
	--moka-focus-ring: 0 0 0 3px var(--moka-color-primary-glow);
	--moka-selected-glow: 0 0 0 2px var(--moka-color-primary-glow-md);
}

/* ===== Dark mode overrides ===== */
/* Applied when .moka-dark class is on .moka-root — allows pure-CSS dark targeting */

.moka-dark {
	/* Matrix dark palette — near-black surfaces, red accent, red-tinted borders */
	--moka-color-primary: #ef5350;
	--moka-color-primary-light: #ff6b68;
	--moka-color-primary-dark: #c62828;
	--moka-color-on-primary: #ffffff;
	--moka-color-secondary: #a0a0aa;
	--moka-color-surface: #0c0c10;
	--moka-color-surface-variant: #14141a;
	--moka-color-on-surface: #e8e8ec;
	--moka-color-on-surface-variant: #a0a0aa;
	--moka-color-background: #060608;
	--moka-color-on-background: #e8e8ec;
	--moka-color-error: #ef5350;
	--moka-color-warning: #ffab40;
	--moka-color-success: #00e676;
	--moka-color-info: #42a5f5;
	--moka-color-outline: rgba(239, 83, 80, 0.12);
	--moka-color-outline-variant: rgba(239, 83, 80, 0.06);

	/* Extended surfaces */
	--moka-color-surface-hover: #14141a;
	--moka-color-surface-2: #101015;
	--moka-color-surface-3: #1a1a22;

	/* Glow tokens */
	--moka-color-primary-glow: rgba(239, 83, 80, 0.08);
	--moka-color-primary-glow-md: rgba(239, 83, 80, 0.15);
	--moka-color-primary-glow-strong: rgba(239, 83, 80, 0.25);
	--moka-color-primary-border: rgba(239, 83, 80, 0.20);
	--moka-color-primary-border-dim: rgba(239, 83, 80, 0.08);

	/* Text scale */
	--moka-color-on-surface-tertiary: #6a6a74;
	--moka-color-on-surface-quaternary: #40404a;

	/* Focus ring — signature red-glow */
	--moka-focus-ring: 0 0 0 3px var(--moka-color-primary-glow), inset 0 0 12px var(--moka-color-primary-glow);
	--moka-selected-glow: inset 0 0 20px var(--moka-color-primary-glow), 0 0 12px var(--moka-color-primary-glow);

	/* Shadows become glow rings in dark mode */
	--moka-shadow-1: 0 0 0 1px rgba(239, 83, 80, 0.06);
	--moka-shadow-2: 0 0 0 1px rgba(239, 83, 80, 0.12);
	--moka-shadow-3: 0 0 0 1px rgba(239, 83, 80, 0.12), 0 0 12px rgba(239, 83, 80, 0.08);
	--moka-shadow-4: 0 0 0 1px rgba(239, 83, 80, 0.20), 0 0 24px rgba(239, 83, 80, 0.12);
	--moka-shadow-popup: 0 0 0 1px rgba(239, 83, 80, 0.12), 0 0 16px rgba(239, 83, 80, 0.08);
	--moka-shadow-popup-lg: 0 0 0 1px rgba(239, 83, 80, 0.16), 0 0 24px rgba(239, 83, 80, 0.12);
	--moka-shadow-modal: 0 0 0 1px rgba(239, 83, 80, 0.20), 0 0 32px rgba(239, 83, 80, 0.15);
	--moka-shadow-subtle: 0 0 0 1px rgba(239, 83, 80, 0.06);
}

/* ===== Shared Animations ===== */

@keyframes moka-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ===== Scrollbar Utilities ===== */

.moka-thin-scrollbar::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.moka-thin-scrollbar::-webkit-scrollbar-track {
	background: transparent;
}

.moka-thin-scrollbar::-webkit-scrollbar-thumb {
	background: var(--moka-color-primary-border);
	border-radius: 2px;
}

.moka-thin-scrollbar::-webkit-scrollbar-thumb:hover {
	background: var(--moka-color-primary-border-dim);
}

.moka-thin-scrollbar {
	scrollbar-width: thin;
	scrollbar-color: var(--moka-color-primary-border) transparent;
}

.moka-hide-scrollbar {
	scrollbar-width: none;
}

.moka-hide-scrollbar::-webkit-scrollbar {
	display: none;
}

/* ===== Text Utilities ===== */

.moka-text--truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.moka-text--clamp {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}