/* ===========================================================================
   Everest design-system tokens (claude.ai/design project 6e9b1907-…)
   Copied from tokens/fonts.css, colors.css, typography.css, spacing.css.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

:root {
	/* ---- Primary: Green ---- */
	--green-50: #f0fdf4;
	--green-100: #dcfce7;
	--green-200: #bbf7d0;
	--green-300: #86efac;
	--green-400: #4ade80;
	--green-500: #22c55e;
	--green-600: #16a34a;
	--green-700: #15803d;
	--green-800: #166534;
	--green-900: #14532d;
	--green-950: #052e16;

	/* ---- Brand Ink ---- */
	--ink-950: #20262e;
	--ink-900: #2b333e;
	--ink-800: #353d49;
	--ink-700: #434c5a;
	--ink-600: #586273;
	--ink-500: #6b7688;

	/* ---- Neutral / Gray ---- */
	--gray-50: #fafafa;
	--gray-100: #f5f5f5;
	--gray-200: #e5e5e5;
	--gray-300: #d4d4d4;
	--gray-400: #a3a3a3;
	--gray-500: #737373;
	--gray-600: #525252;
	--gray-700: #404040;
	--gray-800: #262626;
	--gray-900: #171717;
	--gray-950: #0a0a0a;

	/* ---- Accent: Yellow ---- */
	--yellow-400: #facc15;
	--yellow-500: #eab308;
	--yellow-600: #ca8a04;
	--yellow-700: #a16207;

	/* ---- Pure ---- */
	--white: #ffffff;
	--black: #000000;

	/* ---- Semantic status ---- */
	--success: var(--green-600);
	--success-bg: var(--green-50);
	--error: #dc2626;
	--error-bg: #fef2f2;
	--warning: var(--yellow-500);
	--warning-bg: #fefce8;
	--info: #2563eb;
	--info-bg: #eff6ff;

	/* ---- Brand ---- */
	--brand-primary: var(--green-600);
	--brand-primary-hover: var(--green-700);
	--brand-ink: var(--ink-900);
	--brand-accent: var(--yellow-500);

	/* ---- Text ---- */
	--text-strong: var(--ink-900);
	--text-body: var(--gray-600);
	--text-muted: var(--gray-500);
	--text-on-dark: var(--white);
	--text-on-dark-muted: #d7dbe2;
	--text-link: var(--green-600);

	/* ---- Surfaces ---- */
	--surface-page: var(--white);
	--surface-subtle: var(--gray-100);
	--surface-card: var(--white);
	--surface-card-muted: var(--gray-50);
	--surface-dark: var(--ink-900);

	/* ---- Lines ---- */
	--border-default: var(--gray-200);
	--border-strong: var(--gray-300);
	--border-on-card: var(--green-100);

	/* ---- Overlays ---- */
	--overlay-hero: rgba(51, 51, 51, 0.73);
	--overlay-scrim: rgba(43, 51, 62, 0.55);

	/* ---- Typography ---- */
	--font-sans: 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--font-display: var(--font-sans);

	--fw-extralight: 200;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	--fw-extrabold: 800;
	--fw-black: 900;

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

	--leading-tight: 1.2;
	--leading-snug: 1.35;
	--leading-normal: 1.6;
	--leading-relaxed: 1.8;

	--tracking-normal: 0;
	--tracking-wide: 0.02em;

	/* ---- Spacing (4px base) ---- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-14: 56px;
	--space-16: 64px;

	--section-y: 50px;
	--navbar-h: 74px;
	--container-max: 1024px;
	--container-pad: 16px;

	/* ---- Radius ---- */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;
	--radius-pill: 9999px;

	/* ---- Shadows ---- */
	--shadow-navbar: 0px 4px 24px 0px rgba(0, 0, 0, 0.06);
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

	/* ---- Motion ---- */
	--ease-standard: ease-in-out;
	--dur-fast: 0.3s;
	--dur-image: 0.3s;
	--dur-slow: 0.5s;
}