/**
 * Raoa LMS design tokens.
 * Source of truth: docs/20-design-system.md
 *
 * Apply on .raoa (frontend) and .raoa-admin (plugin wp-admin UI).
 */

.raoa,
.raoa *,
.raoa-admin,
.raoa-admin * {
	box-sizing: border-box;
}

.raoa,
.raoa-admin {
	/* Brand */
	--raoa-color-brand-50: #eef0ff;
	--raoa-color-brand-100: #e0e7ff;
	--raoa-color-brand-200: #c7d2fe;
	--raoa-color-brand-400: #818cf8;
	--raoa-color-brand-500: #6b63ff;
	--raoa-color-brand-600: #514be3;
	--raoa-color-brand-700: #4339c7;
	--raoa-color-brand-800: #3730a3;
	--raoa-color-brand-900: #312e81;
	--raoa-color-brand: var(--raoa-color-brand-600);
	--raoa-color-brand-hover: var(--raoa-color-brand-700);

	/* Accent */
	--raoa-color-accent-100: #eef0ff;
	--raoa-color-accent-500: #6b63ff;
	--raoa-color-accent-600: #514be3;
	--raoa-color-accent-700: #4339c7;
	--raoa-color-accent-ink: #1e1b4b;
	--raoa-color-on-accent: #ffffff;

	/* Neutrals */
	--raoa-color-paper: #ffffff;
	--raoa-color-canvas: #f8fafc;
	--raoa-color-muted: #eef1f4;
	--raoa-color-line: #d8dee6;
	--raoa-color-border-subtle: #e2e8f0;
	--raoa-color-border-light: #e9eaf0;
	--raoa-color-line-strong: #b4bec9;
	--raoa-color-text-hint: #8c92ac;
	--raoa-color-text-subtle: #4a5a6a;
	--raoa-color-text-muted: #4c4c4c;
	--raoa-color-text: #243140;
	--raoa-color-text-strong: #0f1114;
	--raoa-color-inverse: #ffffff;
	--raoa-color-input-bg: #fcfdfe;
	--raoa-color-hero-bg: #0f172a;
	--raoa-color-hero-bg-mid: #1e293b;

	/* Semantic */
	--raoa-color-success: #1b7f4e;
	--raoa-color-success-bg: #e5f6ed;
	--raoa-color-success-strong: #15803d;
	--raoa-color-success-surface: #dcfce7;
	--raoa-color-warning: #b86a00;
	--raoa-color-warning-bg: #fff4e0;
	--raoa-color-rating-star: #f7a032;
	--raoa-color-star-empty: #d1d5db;
	--raoa-color-danger: #c0352b;
	--raoa-color-danger-bg: #fdecea;
	--raoa-color-info: #1a6bb5;
	--raoa-color-info-bg: #e7f2fb;
	--raoa-color-stat-surface: #f4f8ff;
	--raoa-color-stat-border: #e3ebf7;
	--raoa-color-stat-green: #22c55e;
	--raoa-color-stat-amber: #f59e0b;
	--raoa-color-stat-sky: #0ea5e9;
	--raoa-color-stat-orange: #f97316;
	--raoa-color-stat-teal: #14b8a6;
	--raoa-color-brand-tint-hover: #f4f3ff;
	--raoa-color-overlay: rgba(20, 32, 43, 0.48);
	--raoa-color-focus: var(--raoa-color-brand-600);
	--raoa-focus-ring: 0 0 0 3px rgba(81, 75, 227, 0.35);

	/* Typography */
	--raoa-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--raoa-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
	--raoa-text-xs: 0.75rem;
	--raoa-text-sm: 0.875rem;
	--raoa-text-md: 1rem;
	--raoa-text-lg: 1.125rem;
	--raoa-text-xl: 1.25rem;
	--raoa-text-2xl: 1.5rem;
	--raoa-text-3xl: 1.875rem;
	--raoa-fw-regular: 400;
	--raoa-fw-medium: 500;
	--raoa-fw-semibold: 600;
	--raoa-fw-bold: 700;
	--raoa-lh-tight: 1.25;
	--raoa-lh-snug: 1.375;
	--raoa-lh-body: 1.5;
	--raoa-lh-relaxed: 1.65;
	--raoa-tracking-tight: -0.02em;
	--raoa-tracking-normal: 0;
	--raoa-prose-width: 42rem;

	/* Space */
	--raoa-space-0: 0;
	--raoa-space-1: 0.25rem;
	--raoa-space-2: 0.5rem;
	--raoa-space-3: 0.75rem;
	--raoa-space-4: 1rem;
	--raoa-space-5: 1.25rem;
	--raoa-space-6: 1.5rem;
	--raoa-space-8: 2rem;
	--raoa-space-10: 2.5rem;
	--raoa-space-12: 3rem;
	--raoa-space-16: 4rem;
	--raoa-gap-xs: var(--raoa-space-2);
	--raoa-gap-sm: var(--raoa-space-3);
	--raoa-gap-md: var(--raoa-space-4);
	--raoa-gap-lg: var(--raoa-space-6);
	--raoa-gap-xl: var(--raoa-space-8);
	--raoa-comment-pad: var(--raoa-space-4);
	--raoa-sidebar-width: 18.75rem;
	--raoa-content-max: 80rem;

	/* Border */
	--raoa-border-width: 1px;
	--raoa-border-width-strong: 2px;
	--raoa-border-color: var(--raoa-color-line);
	--raoa-border-color-strong: var(--raoa-color-line-strong);
	--raoa-border-color-brand: var(--raoa-color-brand-200);
	--raoa-border: var(--raoa-border-width) solid var(--raoa-border-color);
	--raoa-border-dashed: var(--raoa-border-width) dashed var(--raoa-border-color);

	/* Radius */
	--raoa-radius-sm: 4px;
	--raoa-radius-md: 8px;
	--raoa-radius-lg: 12px;
	--raoa-radius-xl: 16px;
	--raoa-radius-full: 999px;

	/* Shadow */
	--raoa-shadow-none: none;
	--raoa-shadow-xs: 0 1px 2px rgba(20, 32, 43, 0.06);
	--raoa-shadow-sm: 0 1px 3px rgba(20, 32, 43, 0.08), 0 1px 2px rgba(20, 32, 43, 0.04);
	--raoa-shadow-md: 0 4px 12px rgba(20, 32, 43, 0.1), 0 1px 3px rgba(20, 32, 43, 0.06);
	--raoa-shadow-lg: 0 12px 28px rgba(20, 32, 43, 0.12), 0 4px 8px rgba(20, 32, 43, 0.06);
	--raoa-shadow-panel: 0 10px 30px rgba(0, 0, 0, 0.04);
	--raoa-shadow-focus: var(--raoa-focus-ring);

	/* Motion */
	--raoa-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--raoa-duration-fast: 120ms;
	--raoa-duration: 180ms;
	--raoa-duration-slow: 280ms;

	/* Z-index */
	--raoa-z-base: 1;
	--raoa-z-sticky: 20;
	--raoa-z-dropdown: 40;
	--raoa-z-overlay: 60;
	--raoa-z-modal: 80;
	--raoa-z-toast: 100;

	/* WP admin shell (raoa-admin screens that mirror wp-admin chrome) */
	--raoa-admin-wp-border: #dcdcde;
	--raoa-admin-wp-surface-muted: #f6f7f7;
	--raoa-admin-wp-surface-alt: #fbfbfc;
	--raoa-admin-wp-text: #1d2327;
	--raoa-admin-wp-text-muted: #646970;
	--raoa-admin-wp-line: #c3c4c7;
	--raoa-admin-wp-divider: #f0f0f1;
	--raoa-admin-wp-success: #007017;
	--raoa-admin-wp-warning: #996800;

	/* Controls */
	--raoa-target: 2.75rem;
	--raoa-control-h: 2.5rem;

	font-family: var(--raoa-font-sans);
	color: var(--raoa-color-text);
	line-height: var(--raoa-lh-body);
}

.raoa :focus-visible,
.raoa-admin :focus-visible {
	outline: 2px solid var(--raoa-color-focus);
	outline-offset: 2px;
	box-shadow: var(--raoa-shadow-focus);
}

.raoa a:focus:not(:focus-visible),
.raoa button:focus:not(:focus-visible),
.raoa-admin a:focus:not(:focus-visible),
.raoa-admin button:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.raoa,
	.raoa-admin {
		--raoa-duration-fast: 0.01ms;
		--raoa-duration: 0.01ms;
		--raoa-duration-slow: 0.01ms;
	}
}