/* ==========================================================================
   Teddy Vets — Design Tokens (CSS Variables)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;600;700;800&display=swap');

:root {
	/* === COLORS === */

	/* Brand / Primary - Blue */
	--color-primary:        #2563eb;
	--color-primary-light:  #3b82f6;
	--color-primary-bg:     #eff6ff;
	--color-primary-border: #dbeafe;
	--color-primary-100:    #dbeafe;
	--color-primary-800:    #1e40af;

	/* Accent - Teal */
	--color-teal:           #14b8a6;
	--color-teal-600:       #0891b2;

	/* Status - Yellow / Pending */
	--color-warning:        #ca8a04;
	--color-warning-icon:   #eab308;
	--color-warning-bg:     #fef9c3;
	--color-warning-border: #fef9c3;
	--color-warning-text:   #854d0e;

	/* Status - Green / Approved */
	--color-success:        #16a34a;
	--color-success-icon:   #22c55e;
	--color-success-bg:     #dcfce7;
	--color-success-text:   #166534;

	/* Status - Red / Cancelled */
	--color-danger:         #b91c1c;
	--color-danger-bg:      #fee2e2;
	--color-danger-text:    #991b1b;

	/* Status - Purple / Legal */
	--color-purple:         #9333ea;
	--color-purple-bg:      #f3e8ff;
	--color-purple-text:    #6b21a8;

	/* Status - Gray / Draft */
	--color-gray-bg:        #f3f4f6;
	--color-gray-text:      #1f2937;

	/* Dashboard action buttons */
	--color-green-action:   linear-gradient(to right, #16a34a, #059669);
	--color-purple-action:  linear-gradient(to right, #9333ea, #db2777);
	--color-blue-action:    linear-gradient(to right, #2563eb, #0891b2);

	/* New appointment / sidebar active */
	--color-gradient-main:  linear-gradient(to right, #3b82f6, #14b8a6);

	/* Neutral */
	--color-text-primary:   #1f2937;
	--color-text-secondary: #374151;
	--color-text-muted:     #475569;
	--color-text-placeholder: #737373;
	--color-text-body:      #0a0a0a;

	/* Table row highlight (pending rows) */
	--color-row-pending:    #f2bbad;
	--color-row-pending-hover: #e8a899;
	--color-row-neutral:    #f8fafc;
	--color-row-neutral-hover: #f8fafc;

	/* New customer badge */
	--color-new-customer-bg:     #f2bbad;
	--color-new-customer-border: #d99688;

	/* Borders */
	--color-border:         #e5e7eb;
	--color-border-light:   #e5e5e5;
	--color-border-blue:    #bfdbfe;

	/* Backgrounds */
	--color-page-bg-booking: #f5f3ff;
	--color-page-bg-admin:   linear-gradient(to right bottom, #f8fafc, #eff6ff, #f0fdf4);
	--color-sidebar-bg:      rgba(255,255,255,0.9);
	--color-card-bg:         rgba(255,255,255,0.9);
	--color-card-bg-stat:    rgba(255,255,255,0.8);
	--color-white:           #ffffff;

	/* === TYPOGRAPHY === */
	--font-family: 'Noto Sans Hebrew', sans-serif;
	--direction: rtl;

	--text-xs:   12px;
	--text-sm:   14px;
	--text-base: 16px;
	--text-lg:   18px;
	--text-xl:   20px;
	--text-2xl:  24px;
	--text-3xl:  30px;

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

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

	/* === SPACING & LAYOUT === */
	--radius-sm:   4px;
	--radius-md:   6px;
	--radius-lg:   12px;
	--radius-full: 9999px;

	--shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
	--shadow-md:   0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.1);
	--shadow-lg:   0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.1);
	--shadow-xl:   0 20px 25px rgba(0,0,0,0.1);

	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  20px;
	--space-6:  24px;
	--space-8:  32px;

	--sidebar-width:    256px;
	--content-max-width: 800px;
	--admin-padding:    24px;
}