/**
 * xBot Design Tokens
 *
 * Single source of truth for color, spacing, type, radius, shadow.
 * Light theme is default, [data-theme="dark"] overrides.
 * Brand accent: Amber #f59e0b.
 *
 * RTL: use logical properties (margin-inline-*, padding-inline-*,
 * inset-inline-*, border-start-*, border-end-*). Never margin-left/right
 * unless the value should NOT flip in RTL.
 *
 * For transform: translateX(N) which does not auto-flip, multiply by
 * --rtl-flip (1 in LTR, -1 in RTL).
 */

:root {
	/* Brand */
	--accent:           #f59e0b;
	--accent-hover:     #d97706;
	--accent-pressed:   #b45309;
	--accent-soft:      rgba(245, 158, 11, 0.10);
	--accent-soft-2:    rgba(245, 158, 11, 0.18);
	--accent-fg:        #1f1300; /* readable text on amber */

	/* Surface */
	--bg:               #ffffff;
	--surface:          #fafafa;
	--surface-2:        #f5f5f5;
	--surface-3:        #ededed;
	--surface-overlay:  rgba(255, 255, 255, 0.80);

	/* Border */
	--border:           #ededed;
	--border-strong:    #d4d4d4;
	--border-focus:     var(--accent);

	/* Text */
	--text:             #111111;
	--text-secondary:   #525252;
	--text-muted:       #737373;
	--text-inverse:     #ffffff;

	/* Semantic */
	--success:          #16a34a;
	--success-soft:     rgba(22, 163, 74, 0.10);
	--success-fg:       #052e13;
	--danger:           #dc2626;
	--danger-soft:      rgba(220, 38, 38, 0.10);
	--danger-fg:        #450a0a;
	--warning:          #f59e0b;
	--warning-soft:     rgba(245, 158, 11, 0.10);
	--info:             #0284c7;
	--info-soft:        rgba(2, 132, 199, 0.10);

	/* Radius */
	--radius-xs:        4px;
	--radius-sm:        6px;
	--radius-md:        8px;
	--radius-lg:        12px;
	--radius-xl:        16px;
	--radius-full:      9999px;

	/* Spacing — 4px grid */
	--space-1:          4px;
	--space-2:          8px;
	--space-3:          12px;
	--space-4:          16px;
	--space-5:          20px;
	--space-6:          24px;
	--space-8:          32px;
	--space-10:         40px;
	--space-12:         48px;
	--space-16:         64px;

	/* Type */
	--font-sans:        'Inter', 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono:        'JetBrains Mono', ui-monospace, monospace;

	--text-xs:          11px;
	--text-sm:          12.5px;
	--text-base:        14px;
	--text-md:          15px;
	--text-lg:          17px;
	--text-xl:          20px;
	--text-2xl:         24px;
	--text-3xl:         30px;

	--leading-tight:    1.25;
	--leading-normal:   1.5;
	--leading-relaxed:  1.65;

	/* Shadow */
	--shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-md:        0 4px 12px rgba(0, 0, 0, 0.06);
	--shadow-lg:        0 12px 32px rgba(0, 0, 0, 0.10);
	--shadow-xl:        0 24px 60px rgba(0, 0, 0, 0.18);
	--shadow-focus:     0 0 0 3px var(--accent-soft);

	/* Layout */
	--container-sm:     680px;
	--container-md:     920px;
	--container-lg:     1200px;

	/* RTL helper for transforms (translateX does not flip automatically) */
	--rtl-flip:         1;

	/* Z-index scale */
	--z-dropdown:       100;
	--z-sticky:         200;
	--z-modal-bg:       900;
	--z-modal:          901;
	--z-toast:          1000;

	/* Motion */
	--ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out:      cubic-bezier(0.45, 0, 0.55, 1);
	--dur-fast:         120ms;
	--dur-base:         180ms;
	--dur-slow:         320ms;
}

[data-theme="dark"] {
	--bg:               #0a0a0a;
	--surface:          #111111;
	--surface-2:        #161616;
	--surface-3:        #1f1f1f;
	--surface-overlay:  rgba(10, 10, 10, 0.80);

	--border:           #1f1f1f;
	--border-strong:    #2a2a2a;

	--text:             #f5f5f5;
	--text-secondary:   #a3a3a3;
	--text-muted:       #737373;
	--text-inverse:     #0a0a0a;

	--success-soft:     rgba(22, 163, 74, 0.18);
	--success-fg:       #4ade80;
	--danger-soft:      rgba(220, 38, 38, 0.18);
	--danger-fg:        #f87171;
	--warning-soft:     rgba(245, 158, 11, 0.18);
	--info-soft:        rgba(2, 132, 199, 0.18);

	--shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.40);
	--shadow-md:        0 4px 12px rgba(0, 0, 0, 0.50);
	--shadow-lg:        0 12px 32px rgba(0, 0, 0, 0.60);
	--shadow-xl:        0 24px 60px rgba(0, 0, 0, 0.70);
}

/* RTL */
[dir="rtl"] {
	--rtl-flip:         -1;
}

/* Base reset — only what's actually missing from a normal CSS reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

a {
	color: var(--accent);
	text-decoration: none;
}
a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

::selection {
	background: var(--accent-soft-2);
	color: var(--text);
}

/* Utility: focus ring */
.x-focus-ring:focus-visible,
.x-focus-ring:focus {
	outline: none;
	box-shadow: var(--shadow-focus);
}