/**
 * Doctoria Design System — Shared Design Tokens
 * Single source of truth for color palettes, spacing scales, typography,
 * border radii, elevation shadows, and foundational component primitives.
 */

:root {
	/* ------------------------------------------------------------------------
	 * 1. Color Palette: Brand & Semantic
	 * --------------------------------------------------------------------- */
	--ui-primary: #007f91;
	--ui-primary-hover: #006f7f;
	--ui-primary-active: #005f6d;
	--ui-primary-soft: rgba(0, 127, 145, 0.12);
	--ui-primary-subtle: #ecfeff;

	--ui-secondary: #1e3a8a;
	--ui-secondary-hover: #172554;
	--ui-secondary-active: #1e293b;
	--ui-secondary-soft: rgba(30, 58, 138, 0.12);
	--ui-secondary-subtle: #eff6ff;

	--ui-success: #16a34a;
	--ui-success-hover: #15803d;
	--ui-success-soft: #dcfce7;
	--ui-success-subtle: #f0fdf4;

	--ui-warning: #d97706;
	--ui-warning-hover: #b45309;
	--ui-warning-soft: #fef3c7;
	--ui-warning-subtle: #fffbeb;

	--ui-danger: #dc2626;
	--ui-danger-hover: #b91c1c;
	--ui-danger-soft: #fee2e2;
	--ui-danger-subtle: #fef2f2;

	--ui-info: #0284c7;
	--ui-info-hover: #0369a1;
	--ui-info-soft: #e0f2fe;

	/* ------------------------------------------------------------------------
	 * 2. Neutral Surfaces, Borders, and Text
	 * --------------------------------------------------------------------- */
	--ui-surface: #ffffff;
	--ui-surface-muted: #f8fafc;
	--ui-surface-subtle: #f1f5f9;
	--ui-surface-inset: #e2e8f0;

	--ui-border: #e2e8f0;
	--ui-border-strong: #cbd5e1;
	--ui-border-focus: #007f91;

	--ui-text: #0f172a;
	--ui-text-muted: #64748b;
	--ui-text-light: #94a3b8;
	--ui-text-inverse: #ffffff;

	/* ------------------------------------------------------------------------
	 * 3. Typography Scales
	 * --------------------------------------------------------------------- */
	--ui-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	--ui-text-xs: 0.75rem;    /* 12px */
	--ui-text-sm: 0.875rem;   /* 14px */
	--ui-text-base: 1rem;     /* 16px */
	--ui-text-lg: 1.125rem;   /* 18px */
	--ui-text-xl: 1.25rem;    /* 20px */
	--ui-text-2xl: 1.5rem;    /* 24px */
	--ui-text-3xl: 1.875rem;  /* 30px */
	--ui-text-4xl: 2.25rem;   /* 36px */

	--ui-font-light: 300;
	--ui-font-normal: 400;
	--ui-font-medium: 500;
	--ui-font-semibold: 600;
	--ui-font-bold: 700;
	--ui-font-extrabold: 800;

	--ui-leading-none: 1;
	--ui-leading-tight: 1.25;
	--ui-leading-normal: 1.5;
	--ui-leading-relaxed: 1.625;

	/* ------------------------------------------------------------------------
	 * 4. Systematic Spacing Scale (4px / 8px grid)
	 * --------------------------------------------------------------------- */
	--ui-space-1: 0.25rem;    /* 4px */
	--ui-space-2: 0.5rem;     /* 8px */
	--ui-space-3: 0.75rem;    /* 12px */
	--ui-space-4: 1rem;       /* 16px */
	--ui-space-5: 1.25rem;    /* 20px */
	--ui-space-6: 1.5rem;     /* 24px */
	--ui-space-8: 2rem;       /* 32px */
	--ui-space-10: 2.5rem;    /* 40px */
	--ui-space-12: 3rem;      /* 48px */
	--ui-space-16: 4rem;      /* 64px */

	/* ------------------------------------------------------------------------
	 * 5. Border Radius Scale
	 * --------------------------------------------------------------------- */
	--ui-radius-sm: 0.375rem;  /* 6px */
	--ui-radius-md: 0.5rem;    /* 8px */
	--ui-radius-lg: 0.75rem;   /* 12px */
	--ui-radius-xl: 0.9rem;    /* 14.4px — matches .ui-panel */
	--ui-radius-2xl: 1.25rem;  /* 20px */
	--ui-radius-3xl: 1.5rem;   /* 24px */
	--ui-radius-full: 9999px;

	/* ------------------------------------------------------------------------
	 * 6. Elevation & Shadow Scales
	 * --------------------------------------------------------------------- */
	--ui-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
	--ui-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08);
	--ui-shadow-soft: 0 0.25rem 1rem rgba(15, 23, 42, 0.04);
	--ui-shadow-raised: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.1);
	--ui-shadow-lg: 0 1.5rem 3rem rgba(2, 6, 23, 0.2);
}

/* ----------------------------------------------------------------------------
 * Foundational Primitives & Utilities
 * ------------------------------------------------------------------------- */

/* Text Utilities */
.text-ui-primary {
	color: var(--ui-primary) !important;
}

.text-ui-secondary {
	color: var(--ui-secondary) !important;
}

.text-ui-muted {
	color: var(--ui-text-muted) !important;
}

.text-ui-success {
	color: var(--ui-success) !important;
}

.text-ui-danger {
	color: var(--ui-danger) !important;
}

/* Background Utilities */
.bg-ui-primary {
	background-color: var(--ui-primary) !important;
	color: var(--ui-text-inverse) !important;
}

.bg-ui-secondary {
	background-color: var(--ui-secondary) !important;
	color: var(--ui-text-inverse) !important;
}

.bg-ui-surface {
	background-color: var(--ui-surface) !important;
}

.bg-ui-surface-muted {
	background-color: var(--ui-surface-muted) !important;
}

.bg-ui-surface-subtle {
	background-color: var(--ui-surface-subtle) !important;
}

.bg-ui-primary-soft {
	background-color: var(--ui-primary-soft) !important;
	color: var(--ui-primary) !important;
}

/* UI Panel & Control Primitives */
.ui-panel {
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-xl);
	box-shadow: var(--ui-shadow-soft);
}

.ui-control {
	border-color: var(--ui-border);
	background: var(--ui-surface);
	color: var(--ui-text);
	border-radius: var(--ui-radius-md);
}

.ui-control:focus {
	border-color: var(--ui-primary);
	box-shadow: 0 0 0 0.2rem var(--ui-primary-soft);
}

/* Button Primitives */
.btn-ui-primary {
	background-color: var(--ui-primary);
	border-color: var(--ui-primary);
	color: var(--ui-text-inverse);
	border-radius: var(--ui-radius-md);
	font-weight: var(--ui-font-semibold);
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-ui-primary:hover,
.btn-ui-primary:focus {
	background-color: var(--ui-primary-hover);
	border-color: var(--ui-primary-hover);
	color: var(--ui-text-inverse);
}

.btn-ui-outline-primary {
	border-color: var(--ui-primary);
	color: var(--ui-primary);
	background-color: transparent;
	border-radius: var(--ui-radius-md);
	font-weight: var(--ui-font-semibold);
	transition: all 0.2s ease;
}

.btn-ui-outline-primary:hover,
.btn-ui-outline-primary:focus {
	background-color: var(--ui-primary-soft);
	border-color: var(--ui-primary);
	color: var(--ui-primary);
}

.btn-ui-secondary {
	background-color: var(--ui-secondary);
	border-color: var(--ui-secondary);
	color: var(--ui-text-inverse);
	border-radius: var(--ui-radius-md);
	font-weight: var(--ui-font-semibold);
}

.btn-ui-secondary:hover,
.btn-ui-secondary:focus {
	background-color: var(--ui-secondary-hover);
	border-color: var(--ui-secondary-hover);
	color: var(--ui-text-inverse);
}

/* ----------------------------------------------------------------------------
 * Backward-Compatibility Aliases
 * Ensures pre-existing views using custom class conventions continue working seamlessly.
 * ------------------------------------------------------------------------- */
.text-primary-custom {
	color: var(--ui-primary) !important;
}

.btn-primary-custom {
	background: var(--ui-primary);
	border-color: var(--ui-primary);
	color: var(--ui-text-inverse);
}

.btn-primary-custom:hover {
	background: var(--ui-primary-hover);
	border-color: var(--ui-primary-hover);
	color: var(--ui-text-inverse);
}

.btn-outline-primary-custom {
	border-color: var(--ui-primary);
	color: var(--ui-primary);
	background: transparent;
}

.btn-outline-primary-custom:hover {
	background: var(--ui-primary-soft);
	border-color: var(--ui-primary);
	color: var(--ui-primary);
}