/* ============================================================
   Directional Soft UI — Design Tokens (Light Theme Only)
   Source of truth: design/system/tokens.css
   Sync changes from there into this file.
   Dark theme is handled by CilTheme.Create() (MudBlazor palette).
   ============================================================ */

:root {
	/* ── Surface ─────────────────────────────────────────── */
	--color-surface:          #e6eaf1;
	--color-surface-elevated: #eef2f6;
	--color-surface-brushed:  #dde1e8;

	/* ── Text ────────────────────────────────────────────── */
	--color-text:             rgb(51 65 85);
	--color-text-secondary:   rgb(100 116 139);
	--color-text-disabled:    rgb(148 163 184);
	--color-text-inverse:     #f1f5f9;

	/* ── Accent ──────────────────────────────────────────── */
	--color-accent:           #4A3560;
	--color-accent-hover:     #5E4A75;
	--color-accent-subtle:    #F3EFF6;
	--color-accent-text:      #ffffff;

	/* ── Borders ─────────────────────────────────────────── */
	--color-border-soft:        rgba(163, 177, 198, 0.22);
	--color-border-paper:       rgba(146, 160, 179, 0.44);
	--color-border-paper-soft:  rgba(146, 160, 179, 0.42);
	--color-border-selected:    rgba(255, 255, 255, 0.5);
	--color-border-input:       rgba(146, 160, 179, 0.35);

	/* ── Shadows (directional top-left light) ────────────── */
	--shadow-raised-light:  rgba(255, 255, 255, 0.62);
	--shadow-raised-dark:   rgba(163, 177, 198, 0.16);
	--shadow-inset-light:   rgba(255, 255, 255, 0.56);
	--shadow-inset-dark:    rgba(163, 177, 198, 0.14);

	--shadow-raised:
		-2px -2px 4px var(--shadow-raised-light),
		 3px  3px 5px var(--shadow-raised-dark);
	--shadow-inset:
		inset -2px -2px 4px var(--shadow-inset-light),
		inset  2px  2px 4px var(--shadow-inset-dark);

	/* ── Paper gradients ─────────────────────────────────── */
	--paper-top:    rgba(238, 241, 245, 0.98);
	--paper-bottom: rgba(233, 237, 242, 0.96);

	/* ── Selected ────────────────────────────────────────── */
	--selected-surface: rgba(238, 242, 246, 0.7);

	/* ── LED indicator ───────────────────────────────────── */
	--color-led-outline:  rgba(0, 0, 0, 0.08);
	--led-off:            rgba(156, 163, 175, 0.7);
	--led-on:             #ffffff;
	--led-glow:           0 0 6px rgba(255, 255, 255, 0.9);

	/* ── LED status colors ───────────────────────────────── */
	--led-success:        #6ee7b7;
	--led-success-glow:   0 0 6px rgba(110, 231, 183, 0.7);
	--led-warning:        #fbbf24;
	--led-warning-glow:   0 0 6px rgba(251, 191, 36, 0.7);
	--led-error:          #f87171;
	--led-error-glow:     0 0 6px rgba(248, 113, 113, 0.7);
	--led-info:           #ffffff;
	--led-info-glow:      0 0 6px rgba(255, 255, 255, 0.9);

	/* ── Overlay ─────────────────────────────────────────── */
	--overlay-hover:    rgba(255, 255, 255, 0.06);
	--overlay-backdrop: rgba(0, 0, 0, 0.25);

	/* ── Radius ──────────────────────────────────────────── */
	--radius-xs:   7px;
	--radius-sm:   10px;
	--radius-md:   12px;
	--radius-lg:   14px;
	--radius-xl:   20px;
	--radius-pill: 999px;

	/* ── Spacing ─────────────────────────────────────────── */
	--space-1:  4px;
	--space-2:  6px;
	--space-3:  8px;
	--space-4:  12px;
	--space-5:  16px;
	--space-6:  20px;
	--space-7:  24px;
	--space-8:  32px;
	--space-9:  48px;
	--space-10: 64px;

	/* ── Typography ──────────────────────────────────────── */
	--font-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--font-mono:  'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;

	--text-xs:   0.75rem;
	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.25rem;
	--text-2xl:  1.5rem;
	--text-3xl:  1.875rem;
	--text-4xl:  2.25rem;

	--leading-tight:  1.25;
	--leading-normal: 1.5;
	--leading-loose:  1.75;

	--weight-normal:   400;
	--weight-medium:   500;
	--weight-semibold: 600;
	--weight-bold:     700;

	/* ── Toggle ──────────────────────────────────────────── */
	--toggle-width:        70px;
	--toggle-height:       34px;
	--toggle-thumb-size:   22px;
	--toggle-thumb-offset: 6px;
	--toggle-thumb-travel: 32px;

	/* ── LED size ────────────────────────────────────────── */
	--led-size: 10px;

	/* ── Layout ──────────────────────────────────────────── */
	--max-width:     1280px;
	--nav-width:     240px;
	--chat-width:    400px;
	--header-height: 56px;

	/* ── Transition ──────────────────────────────────────── */
	--transition-fast:   120ms ease;
	--transition-normal: 200ms ease;
	--transition-slow:   320ms ease;
}