/**
 * TutorBridgePro Design Tokens
 *
 * Central source for colors, typography, spacing,
 * borders, shadows and responsive containers.
 */

:root {
	/* Brand colors */
	--tbp-color-navy-950: #06162a;
	--tbp-color-navy-900: #0b1f3a;
	--tbp-color-navy-800: #123154;

	--tbp-color-blue-700: #0d62c4;
	--tbp-color-blue-600: #1278e7;
	--tbp-color-blue-500: #318cf0;
	--tbp-color-blue-100: #eaf3ff;

	--tbp-color-gold-600: #b89224;
	--tbp-color-gold-500: #d4af37;
	--tbp-color-gold-100: #fbf5df;

	--tbp-color-white: #ffffff;
	--tbp-color-black: #000000;

	/* Neutral colors */
	--tbp-color-slate-950: #101828;
	--tbp-color-slate-800: #29364d;
	--tbp-color-slate-700: #3d4b63;
	--tbp-color-slate-600: #59677d;
	--tbp-color-slate-500: #78869a;
	--tbp-color-slate-300: #cbd2dc;
	--tbp-color-slate-200: #e2e7ed;
	--tbp-color-slate-100: #f1f4f7;
	--tbp-color-slate-50: #f8fafc;

	/* Feedback colors */
	--tbp-color-success: #17875d;
	--tbp-color-warning: #c27a0a;
	--tbp-color-danger: #c9363e;
	--tbp-color-info: #1278e7;

	/* Light theme semantic colors */
	--tbp-color-background: var(--tbp-color-white);
	--tbp-color-surface: var(--tbp-color-white);
	--tbp-color-surface-soft: var(--tbp-color-slate-50);
	--tbp-color-surface-muted: var(--tbp-color-slate-100);

	--tbp-color-heading: var(--tbp-color-navy-900);
	--tbp-color-text: var(--tbp-color-slate-800);
	--tbp-color-text-muted: var(--tbp-color-slate-600);

	--tbp-color-border: var(--tbp-color-slate-200);
	--tbp-color-border-strong: var(--tbp-color-slate-300);

	--tbp-color-primary: var(--tbp-color-blue-600);
	--tbp-color-primary-hover: var(--tbp-color-blue-700);
	--tbp-color-accent: var(--tbp-color-gold-500);

	/* Typography */
	--tbp-font-ar:
		"Cairo",
		"Noto Sans Arabic",
		Tahoma,
		Arial,
		sans-serif;

	--tbp-font-en:
		"Inter",
		"Manrope",
		"Segoe UI",
		Arial,
		sans-serif;

	--tbp-font-body: var(--tbp-font-en);
	--tbp-font-heading: var(--tbp-font-en);

	--tbp-font-size-xs: 0.75rem;
	--tbp-font-size-sm: 0.875rem;
	--tbp-font-size-md: 1rem;
	--tbp-font-size-lg: 1.125rem;
	--tbp-font-size-xl: 1.25rem;
	--tbp-font-size-2xl: 1.5rem;
	--tbp-font-size-3xl: 1.875rem;
	--tbp-font-size-4xl: 2.25rem;
	--tbp-font-size-5xl: 3rem;
	--tbp-font-size-6xl: 3.75rem;

	--tbp-font-weight-regular: 400;
	--tbp-font-weight-medium: 500;
	--tbp-font-weight-semibold: 600;
	--tbp-font-weight-bold: 700;
	--tbp-font-weight-extrabold: 800;

	--tbp-line-height-tight: 1.2;
	--tbp-line-height-heading: 1.3;
	--tbp-line-height-body: 1.7;

	/* Spacing */
	--tbp-space-1: 0.25rem;
	--tbp-space-2: 0.5rem;
	--tbp-space-3: 0.75rem;
	--tbp-space-4: 1rem;
	--tbp-space-5: 1.25rem;
	--tbp-space-6: 1.5rem;
	--tbp-space-8: 2rem;
	--tbp-space-10: 2.5rem;
	--tbp-space-12: 3rem;
	--tbp-space-16: 4rem;
	--tbp-space-20: 5rem;
	--tbp-space-24: 6rem;

	/* Borders */
	--tbp-radius-sm: 0.5rem;
	--tbp-radius-md: 0.75rem;
	--tbp-radius-lg: 1rem;
	--tbp-radius-xl: 1.5rem;
	--tbp-radius-pill: 999px;

	--tbp-border-width: 1px;

	/* Shadows */
	--tbp-shadow-sm:
		0 1px 2px rgb(16 24 40 / 5%);

	--tbp-shadow-md:
		0 8px 24px rgb(11 31 58 / 8%);

	--tbp-shadow-lg:
		0 20px 50px rgb(11 31 58 / 12%);

	/* Layout */
	--tbp-container-sm: 768px;
	--tbp-container-md: 1024px;
	--tbp-container-lg: 1280px;
	--tbp-container-xl: 1440px;

	--tbp-page-gutter: clamp(1rem, 3vw, 2.5rem);

	/* Motion */
	--tbp-transition-fast: 150ms ease;
	--tbp-transition-normal: 250ms ease;
	--tbp-transition-slow: 400ms ease;
}

/* Arabic typography */
html[dir="rtl"] {
	--tbp-font-body: var(--tbp-font-ar);
	--tbp-font-heading: var(--tbp-font-ar);
}

/* English typography */
html[dir="ltr"] {
	--tbp-font-body: var(--tbp-font-en);
	--tbp-font-heading: var(--tbp-font-en);
}

/* Dark theme */
html[data-theme="dark"] {
	color-scheme: dark;

	--tbp-color-background: var(--tbp-color-navy-950);
	--tbp-color-surface: var(--tbp-color-navy-900);
	--tbp-color-surface-soft: #102945;
	--tbp-color-surface-muted: #173452;

	--tbp-color-heading: var(--tbp-color-white);
	--tbp-color-text: #dce5ef;
	--tbp-color-text-muted: #aab8c8;

	--tbp-color-border: #29435f;
	--tbp-color-border-strong: #3b5774;

	--tbp-shadow-sm:
		0 1px 2px rgb(0 0 0 / 20%);

	--tbp-shadow-md:
		0 8px 24px rgb(0 0 0 / 25%);

	--tbp-shadow-lg:
		0 20px 50px rgb(0 0 0 / 35%);
}