/* יוסף האוסף — tokens. הקובץ היחיד שמחזיק ערכים גולמיים (צבעים, מידות, פונטים). */
@layer reset, vendor, tokens, base, layout, components, screens, utilities;
@import url("/rt/ysf_dt/dataTables.dataTables.min.css") layer(vendor);

@layer tokens {
	@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap; src: url("/rt/ysf_ui/fonts/rubik-hebrew-400-normal.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
	@font-face { font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap; src: url("/rt/ysf_ui/fonts/rubik-hebrew-500-normal.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
	@font-face { font-family: "Rubik"; font-style: normal; font-weight: 700; font-display: swap; src: url("/rt/ysf_ui/fonts/rubik-hebrew-700-normal.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
	@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap; src: url("/rt/ysf_ui/fonts/rubik-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
	@font-face { font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap; src: url("/rt/ysf_ui/fonts/rubik-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
	@font-face { font-family: "Rubik"; font-style: normal; font-weight: 700; font-display: swap; src: url("/rt/ysf_ui/fonts/rubik-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

	:root {
		color-scheme: light dark;

		/* brand — פיגמנטים גולמיים (LiquidGlass) */
		--color_rose: #d9607f;
		--color_ocean: #2b8fd0;
		--color_sparkle: #5ab7ea;
		--color_sapphire: #0b1326;
		--color_slate: #0f1c34;
		--color_pearl: #e2edfc;

		/* typography */
		--font_family: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
		--font_family_mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
		--font_size_base: 1.125rem;
		--font_size_sm: 0.9375rem;
		--font_size_xs: 0.8125rem;
		--font_size_lg: 1.375rem;
		--font_size_xl: 1.75rem;
		--font_size_2xl: 2.25rem;
		--font_weight_regular: 400;
		--font_weight_medium: 500;
		--font_weight_bold: 700;
		--line_height_base: 1.65;
		--line_height_tight: 1.25;

		/* space */
		--space_1: 0.25rem;
		--space_2: 0.5rem;
		--space_3: 0.75rem;
		--space_4: 1rem;
		--space_5: 1.5rem;
		--space_6: 2rem;
		--space_7: 3rem;
		--space_8: 4.5rem;
		--gutter: 1rem;

		/* shape + glass */
		--radius_sm: 0.5rem;
		--radius_md: 0.75rem;
		--radius_lg: 1rem;
		--radius_xl: 1.5rem;
		--radius_pill: 999px;
		--border_width: 1px;
		--border_width_thick: 2px;
		--blur_glass: 20px;
		--blur_glass_strong: 28px;
		--saturate_glass: 150%;
		--size_tap_target: 44px;
		--size_content: 76rem;
		--size_narrow: 40rem;
		--size_icon: 1.25rem;
		--size_dot: 0.5rem;
		--size_logo: 3rem;
		--size_progress: 0.875rem;
		--size_spinner: 1.1rem;
		--size_code_input: 12rem;

		/* motion */
		--ease_spring: cubic-bezier(0.34, 1.56, 0.64, 1);
		--ease_out: cubic-bezier(0.22, 1, 0.36, 1);
		--transition_fast: 140ms var(--ease_out);
		--transition_base: 260ms var(--ease_spring);
		--tilt: 1.5deg;
		--lift: -2px;
		--float_distance: -4px;

		/* z */
		--z_header: 50;
		--z_skip: 100;

		/* focus */
		--focus_ring_width: 3px;
		--focus_ring_offset: 2px;
		--zoom_base: 1;

		/* logo */
		--color_logo_sheet_back: #bfe3f7;
		--color_logo_sheet_mid: #d3e6f7;
		--color_logo_sheet_front: #f1f6fd;
		--color_logo_line_soft: #a9b9d4;
		--color_logo_clip_end: #c9587a;

		/* surfaces — light */
		--color_ok: #047857;
		--color_ok_soft: rgba(16, 185, 129, 0.14);
		--color_warn: #92400e;
		--color_warn_soft: rgba(245, 158, 11, 0.18);
		--color_bad: #be123c;
		--color_bad_soft: rgba(225, 29, 72, 0.12);
		--color_idle: #3d4f6e;
		--color_idle_soft: rgba(100, 116, 139, 0.15);
		--color_bg: #ebf1f8;
		--color_bg_alt: #e2edfc;
		--color_surface: rgba(226, 237, 252, 0.62);
		--color_surface_solid: #e2edfc;
		--color_surface_strong: rgba(226, 237, 252, 0.92);
		--color_border: rgba(15, 28, 52, 0.12);
		--color_border_strong: rgba(15, 28, 52, 0.45);
		--color_text: #0f1c34;
		--color_text_muted: #40506c;
		--color_primary: #c4476b;
		--color_primary_soft: rgba(217, 96, 127, 0.14);
		--color_tertiary: #a8335a;
		--color_text_on_primary: #f1f6fd;
		--color_link: #1b6fa8;
		--color_focus: #2b8fd0;
		--color_glow_a: rgba(90, 183, 234, 0.32);
		--color_glow_b: rgba(217, 96, 127, 0.16);
		--color_input_bg: rgba(241, 246, 253, 0.8);
		--color_row_hover: rgba(43, 143, 208, 0.08);
		--color_header_bg: rgba(235, 241, 248, 0.72);
		--color_rim: rgba(241, 246, 253, 0.85);
		--color_rim_low: rgba(15, 28, 52, 0.1);
		--shadow_inset: inset 0 1px 1px 0 rgba(241, 246, 253, 0.9);
		--shadow_card: 0 14px 34px -16px rgba(15, 28, 52, 0.28), 0 6px 20px -12px rgba(43, 143, 208, 0.3);
		--shadow_lift: 0 22px 44px -16px rgba(15, 28, 52, 0.32), 0 10px 30px -10px rgba(217, 96, 127, 0.4);
		--shadow_button: 0 8px 20px -8px rgba(196, 71, 107, 0.6);
		--gradient_primary: linear-gradient(135deg, #cf4f72, #c4476b 55%, #a8335a);
		--gradient_primary_hover: linear-gradient(135deg, #d9607f, #cf4f72 55%, #b83a5e);
		--gradient_sheen: linear-gradient(135deg, rgba(241, 246, 253, 0.55), transparent 45%);
	}

	/* surfaces — dark: אוטומטי לפי המערכת, אלא אם נבחר ידנית יום */
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) {
			--color_ok: #6ee7b7;
			--color_ok_soft: rgba(16, 185, 129, 0.16);
			--color_warn: #fcd34d;
			--color_warn_soft: rgba(245, 158, 11, 0.16);
			--color_bad: #fda4af;
			--color_bad_soft: rgba(225, 29, 72, 0.18);
			--color_idle: #b6c6e0;
			--color_idle_soft: rgba(148, 163, 184, 0.16);
			--color_bg: #060e20;
			--color_bg_alt: #0b1326;
			--color_surface: rgba(15, 28, 52, 0.55);
			--color_surface_solid: #0f1c34;
			--color_surface_strong: rgba(15, 28, 52, 0.9);
			--color_border: rgba(226, 237, 252, 0.12);
			--color_border_strong: rgba(226, 237, 252, 0.38);
			--color_text: #e2edfc;
			--color_text_muted: #a9b9d4;
			--color_primary: #d9607f;
			--color_primary_soft: rgba(217, 96, 127, 0.18);
			--color_tertiary: #e47b97;
			--color_text_on_primary: #0b1326;
			--color_link: #5ab7ea;
			--color_focus: #5ab7ea;
			--color_glow_a: rgba(43, 143, 208, 0.26);
			--color_glow_b: rgba(217, 96, 127, 0.16);
			--color_input_bg: rgba(6, 14, 32, 0.55);
			--color_row_hover: rgba(90, 183, 234, 0.09);
			--color_header_bg: rgba(6, 14, 32, 0.7);
			--color_rim: rgba(226, 237, 252, 0.25);
			--color_rim_low: rgba(6, 14, 32, 0.6);
			--shadow_inset: inset 0 1px 1px 0 rgba(226, 237, 252, 0.15);
			--shadow_card: 0 14px 36px -14px rgba(6, 14, 32, 0.75), 0 6px 22px -12px rgba(43, 143, 208, 0.3);
			--shadow_lift: 0 22px 46px -14px rgba(6, 14, 32, 0.8), 0 10px 34px -10px rgba(217, 96, 127, 0.38);
			--shadow_button: 0 8px 22px -8px rgba(217, 96, 127, 0.6);
			--gradient_primary: linear-gradient(135deg, #e47b97, #d9607f 55%, #c4476b);
			--gradient_primary_hover: linear-gradient(135deg, #ee8ca6, #e47b97 55%, #d9607f);
			--gradient_sheen: linear-gradient(135deg, rgba(226, 237, 252, 0.1), transparent 45%);
		}
	}

	:root[data-theme="dark"] {
		--color_ok: #6ee7b7;
		--color_ok_soft: rgba(16, 185, 129, 0.16);
		--color_warn: #fcd34d;
		--color_warn_soft: rgba(245, 158, 11, 0.16);
		--color_bad: #fda4af;
		--color_bad_soft: rgba(225, 29, 72, 0.18);
		--color_idle: #b6c6e0;
		--color_idle_soft: rgba(148, 163, 184, 0.16);
		--color_bg: #060e20;
		--color_bg_alt: #0b1326;
		--color_surface: rgba(15, 28, 52, 0.55);
		--color_surface_solid: #0f1c34;
		--color_surface_strong: rgba(15, 28, 52, 0.9);
		--color_border: rgba(226, 237, 252, 0.12);
		--color_border_strong: rgba(226, 237, 252, 0.38);
		--color_text: #e2edfc;
		--color_text_muted: #a9b9d4;
		--color_primary: #d9607f;
		--color_primary_soft: rgba(217, 96, 127, 0.18);
		--color_tertiary: #e47b97;
		--color_text_on_primary: #0b1326;
		--color_link: #5ab7ea;
		--color_focus: #5ab7ea;
		--color_glow_a: rgba(43, 143, 208, 0.26);
		--color_glow_b: rgba(217, 96, 127, 0.16);
		--color_input_bg: rgba(6, 14, 32, 0.55);
		--color_row_hover: rgba(90, 183, 234, 0.09);
		--color_header_bg: rgba(6, 14, 32, 0.7);
		--color_rim: rgba(226, 237, 252, 0.25);
		--color_rim_low: rgba(6, 14, 32, 0.6);
		--shadow_inset: inset 0 1px 1px 0 rgba(226, 237, 252, 0.15);
		--shadow_card: 0 14px 36px -14px rgba(6, 14, 32, 0.75), 0 6px 22px -12px rgba(43, 143, 208, 0.3);
		--shadow_lift: 0 22px 46px -14px rgba(6, 14, 32, 0.8), 0 10px 34px -10px rgba(217, 96, 127, 0.38);
		--shadow_button: 0 8px 22px -8px rgba(217, 96, 127, 0.6);
		--gradient_primary: linear-gradient(135deg, #e47b97, #d9607f 55%, #c4476b);
		--gradient_primary_hover: linear-gradient(135deg, #ee8ca6, #e47b97 55%, #d9607f);
		--gradient_sheen: linear-gradient(135deg, rgba(226, 237, 252, 0.1), transparent 45%);
	}

	@media (min-width: 48em) {
		:root { --gutter: 2rem; --font_size_xl: 2rem; --font_size_2xl: 2.75rem; }
	}
}