/* ===========================================================================
   Webcam Romania — Design System Tokens
   ---------------------------------------------------------------------------
   Single source of truth for colors, typography, spacing, radii, shadows,
   z-index, motion. Light + dark theme via [data-theme]; respects
   prefers-color-scheme by default.
   =========================================================================== */

:root {
	/* --- Brand --- */
	--wcr-brand-50:  #eaf6ff;
	--wcr-brand-100: #cde9ff;
	--wcr-brand-200: #9ad2ff;
	--wcr-brand-300: #5fb6ff;
	--wcr-brand-400: #2a98f1;
	--wcr-brand-500: #0c7ad6;   /* primary */
	--wcr-brand-600: #0860a8;
	--wcr-brand-700: #064a82;
	--wcr-brand-800: #053862;
	--wcr-brand-900: #042844;

	--wcr-accent-500: #ff5b3a;  /* CTA, live indicator */
	--wcr-accent-600: #e8401f;

	/* Romania flag accent (used sparingly: badges) */
	--wcr-ro-blue:   #002b7f;
	--wcr-ro-yellow: #fcd116;
	--wcr-ro-red:    #ce1126;

	/* --- Neutrals (light theme defaults) --- */
	--wcr-bg:           #ffffff;
	--wcr-bg-soft:      #f6f8fb;
	--wcr-bg-muted:     #eef2f7;
	--wcr-surface:      #ffffff;
	--wcr-surface-2:    #f9fbfd;
	--wcr-border:       #e2e8f0;
	--wcr-border-soft:  #eef2f7;
	--wcr-text:         #0f1923;
	--wcr-text-soft:    #38465a;
	--wcr-text-muted:   #64748b;
	--wcr-text-invert:  #ffffff;
	--wcr-link:         var(--wcr-brand-500);
	--wcr-link-hover:   var(--wcr-brand-700);

	/* Status */
	--wcr-success: #15a36b;
	--wcr-warning: #d68a04;
	--wcr-danger:  #d4321c;
	--wcr-live:    #ff2d55;

	/* --- Typography --- */
	--wcr-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--wcr-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--wcr-fs-12: 0.75rem;
	--wcr-fs-13: 0.8125rem;
	--wcr-fs-14: 0.875rem;
	--wcr-fs-15: 0.9375rem;
	--wcr-fs-16: 1rem;
	--wcr-fs-18: 1.125rem;
	--wcr-fs-20: 1.25rem;
	--wcr-fs-24: 1.5rem;
	--wcr-fs-30: 1.875rem;
	--wcr-fs-36: 2.25rem;
	--wcr-fs-48: 3rem;

	--wcr-lh-tight: 1.15;
	--wcr-lh-snug:  1.3;
	--wcr-lh-base:  1.55;
	--wcr-lh-loose: 1.75;

	--wcr-fw-regular: 400;
	--wcr-fw-medium:  500;
	--wcr-fw-semi:    600;
	--wcr-fw-bold:    700;

	/* --- Spacing (4px base) --- */
	--wcr-s-0:  0;
	--wcr-s-1:  0.25rem;
	--wcr-s-2:  0.5rem;
	--wcr-s-3:  0.75rem;
	--wcr-s-4:  1rem;
	--wcr-s-5:  1.25rem;
	--wcr-s-6:  1.5rem;
	--wcr-s-8:  2rem;
	--wcr-s-10: 2.5rem;
	--wcr-s-12: 3rem;
	--wcr-s-16: 4rem;
	--wcr-s-20: 5rem;

	/* --- Radii --- */
	--wcr-r-sm: 4px;
	--wcr-r-md: 8px;
	--wcr-r-lg: 12px;
	--wcr-r-xl: 16px;
	--wcr-r-2xl: 24px;
	--wcr-r-pill: 999px;

	/* --- Shadows --- */
	--wcr-sh-sm: 0 1px 2px rgba(15, 25, 35, 0.06);
	--wcr-sh-md: 0 4px 12px rgba(15, 25, 35, 0.08);
	--wcr-sh-lg: 0 12px 32px rgba(15, 25, 35, 0.12);
	--wcr-sh-xl: 0 24px 48px rgba(15, 25, 35, 0.18);
	--wcr-sh-focus: 0 0 0 3px rgba(12, 122, 214, 0.35);

	/* --- Layout --- */
	--wcr-container:    1240px;
	--wcr-container-w:  1360px; /* wide */
	--wcr-container-n:  840px;  /* narrow article */
	--wcr-gutter:       clamp(1rem, 2.5vw, 1.5rem);
	--wcr-header-h:     64px;
	--wcr-header-h-lg:  72px;

	/* --- Z-index --- */
	--wcr-z-base:    1;
	--wcr-z-sticky:  10;
	--wcr-z-overlay: 50;
	--wcr-z-modal:   100;
	--wcr-z-toast:   200;

	/* --- Motion --- */
	--wcr-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
	--wcr-ease-in:     cubic-bezier(0.4, 0, 1, 1);
	--wcr-ease-out:    cubic-bezier(0, 0, 0.2, 1);
	--wcr-dur-fast:    120ms;
	--wcr-dur:         220ms;
	--wcr-dur-slow:    420ms;
}

/* ---------------------------------------------------------------------------
   Dark theme — applied via [data-theme="dark"] OR prefers-color-scheme.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wcr-bg:          #0b1220;
		--wcr-bg-soft:     #0f1a2c;
		--wcr-bg-muted:    #142238;
		--wcr-surface:     #142238;
		--wcr-surface-2:   #1a2b46;
		--wcr-border:      #233452;
		--wcr-border-soft: #1a2b46;
		--wcr-text:        #e8edf5;
		--wcr-text-soft:   #b8c2d4;
		--wcr-text-muted:  #8593aa;
		--wcr-link:        var(--wcr-brand-300);
		--wcr-link-hover:  var(--wcr-brand-200);
		--wcr-sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--wcr-sh-md: 0 4px 12px rgba(0, 0, 0, 0.45);
		--wcr-sh-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
	}
}

[data-theme="dark"] {
	--wcr-bg:          #0b1220;
	--wcr-bg-soft:     #0f1a2c;
	--wcr-bg-muted:    #142238;
	--wcr-surface:     #142238;
	--wcr-surface-2:   #1a2b46;
	--wcr-border:      #233452;
	--wcr-border-soft: #1a2b46;
	--wcr-text:        #e8edf5;
	--wcr-text-soft:   #b8c2d4;
	--wcr-text-muted:  #8593aa;
	--wcr-link:        var(--wcr-brand-300);
	--wcr-link-hover:  var(--wcr-brand-200);
	--wcr-sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--wcr-sh-md: 0 4px 12px rgba(0, 0, 0, 0.45);
	--wcr-sh-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--wcr-dur-fast: 0ms;
		--wcr-dur:      0ms;
		--wcr-dur-slow: 0ms;
	}
	* { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}