/*
 * CITS POS — Design tokens.
 *
 * Single source of truth for colors, spacing, radius, shadows, motion. Theme
 * resolution order: explicit `[data-theme="dark"]` on .cits-pos-shell beats
 * the `prefers-color-scheme: dark` media query. Both produce the same
 * variable values.
 *
 * Phase 5 (Modern UI Design + responsiveness — Protocol #1).
 */

.cits-pos-shell {
	/* Palette — light mode defaults */
	--cits-bg:            #f4f6f8;
	--cits-bg-card:       #ffffff;
	--cits-bg-elevated:   #ffffff;
	--cits-bg-muted:      #f1f5f9;
	--cits-bg-overlay:    rgba(15, 23, 42, 0.45);

	--cits-fg:            #0f172a;
	--cits-fg-muted:      #475569;
	--cits-fg-subtle:     #94a3b8;
	--cits-fg-on-accent:  #ffffff;

	--cits-border:        #e2e8f0;
	--cits-border-strong: #cbd5e1;

	/* Accent — overridable via Settings (accent_color). The shortcode template
	 * sets --cits-accent inline if the user has customized it. */
	--cits-accent:        #0ea5e9;
	--cits-accent-hover:  #0284c7;
	--cits-accent-soft:   rgba(14, 165, 233, 0.12);

	/* Status colors */
	--cits-success:       #10b981;
	--cits-warning:       #f59e0b;
	--cits-danger:        #ef4444;
	--cits-info:          #6366f1;

	/* Typography */
	--cits-font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
						  Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue",
						  sans-serif;
	--cits-font-mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo,
						  Consolas, "Liberation Mono", monospace;

	--cits-fs-xs:         0.75rem;   /* 12px */
	--cits-fs-sm:         0.875rem;  /* 14px */
	--cits-fs-base:       1rem;      /* 16px */
	--cits-fs-lg:         1.125rem;  /* 18px */
	--cits-fs-xl:         1.25rem;   /* 20px */
	--cits-fs-2xl:        1.5rem;    /* 24px */

	/* Spacing */
	--cits-space-1:       0.25rem;
	--cits-space-2:       0.5rem;
	--cits-space-3:       0.75rem;
	--cits-space-4:       1rem;
	--cits-space-5:       1.25rem;
	--cits-space-6:       1.5rem;
	--cits-space-8:       2rem;
	--cits-space-10:      2.5rem;

	/* Radius — softer than admin (POS is touch-first) */
	--cits-radius-sm:     6px;
	--cits-radius-md:     10px;
	--cits-radius-lg:     14px;
	--cits-radius-xl:     20px;
	--cits-radius-pill:   999px;

	/* Shadows — "glassy minimal" feel */
	--cits-shadow-sm:     0 1px 2px rgba(15, 23, 42, 0.04);
	--cits-shadow-md:     0 4px 12px rgba(15, 23, 42, 0.06),
						  0 1px 2px rgba(15, 23, 42, 0.04);
	--cits-shadow-lg:     0 12px 32px rgba(15, 23, 42, 0.10),
						  0 2px 8px rgba(15, 23, 42, 0.04);

	/* Motion */
	--cits-ease:          cubic-bezier(0.16, 1, 0.3, 1);
	--cits-duration-fast: 120ms;
	--cits-duration-base: 180ms;

	/* Focus ring (Protocol #2 — visible focus on every interactive) */
	--cits-focus-ring:    0 0 0 3px var(--cits-accent-soft),
						  0 0 0 1.5px var(--cits-accent);
}

/* Dark mode — auto via OS preference unless overridden by [data-theme] */
@media (prefers-color-scheme: dark) {
	.cits-pos-shell:not([data-theme="light"]) {
		--cits-bg:            #0f172a;
		--cits-bg-card:       #1e293b;
		--cits-bg-elevated:   #273549;
		--cits-bg-muted:      #1a2335;
		--cits-bg-overlay:    rgba(2, 6, 23, 0.6);

		--cits-fg:            #f1f5f9;
		--cits-fg-muted:      #cbd5e1;
		--cits-fg-subtle:     #94a3b8;

		--cits-border:        #334155;
		--cits-border-strong: #475569;

		--cits-accent:        #38bdf8;
		--cits-accent-hover:  #7dd3fc;
		--cits-accent-soft:   rgba(56, 189, 248, 0.18);

		--cits-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.25);
		--cits-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.35),
							  0 1px 2px rgba(0, 0, 0, 0.20);
		--cits-shadow-lg:     0 12px 32px rgba(0, 0, 0, 0.45),
							  0 2px 8px rgba(0, 0, 0, 0.20);
	}
}

/* Manual override — beats both light default and dark media query. */
.cits-pos-shell[data-theme="dark"] {
	--cits-bg:            #0f172a;
	--cits-bg-card:       #1e293b;
	--cits-bg-elevated:   #273549;
	--cits-bg-muted:      #1a2335;
	--cits-bg-overlay:    rgba(2, 6, 23, 0.6);

	--cits-fg:            #f1f5f9;
	--cits-fg-muted:      #cbd5e1;
	--cits-fg-subtle:     #94a3b8;

	--cits-border:        #334155;
	--cits-border-strong: #475569;

	--cits-accent:        #38bdf8;
	--cits-accent-hover:  #7dd3fc;
	--cits-accent-soft:   rgba(56, 189, 248, 0.18);

	--cits-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.25);
	--cits-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.35),
						  0 1px 2px rgba(0, 0, 0, 0.20);
	--cits-shadow-lg:     0 12px 32px rgba(0, 0, 0, 0.45),
						  0 2px 8px rgba(0, 0, 0, 0.20);
}

/* Honor reduced-motion (Protocol #2). */
@media (prefers-reduced-motion: reduce) {
	.cits-pos-shell *,
	.cits-pos-shell *::before,
	.cits-pos-shell *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}