/**
 * ArabiSEO Pro — design tokens (light, app-synced)
 */

:root {
	--as-canvas: #f1f2f4;
	--as-surface: #ffffff;
	--as-muted: #f1f5f9;
	--as-tint: #ebf5f5;

	--as-ink: #0f172a;
	--as-ink-2: #334155;
	--as-ink-3: #64748b;
	--as-line: #e2e8f0;

	--as-teal: #115e59;
	--as-teal-deep: #134e4a;
	--as-teal-mid: #0d9488;
	--as-gold: #d97706;

	--as-ok: #059669;

	--as-font-display: "Cairo", system-ui, sans-serif;
	--as-font-body: "IBM Plex Sans Arabic", system-ui, sans-serif;

	--as-text-hero: clamp(2.25rem, 4.5vw, 3.5rem);
	--as-text-xl: clamp(1.5rem, 2.5vw, 2rem);
	--as-text-lg: clamp(1.125rem, 1.5vw, 1.25rem);
	--as-text-base: 1.0625rem;
	--as-text-sm: 0.9375rem;
	--as-text-xs: 0.8125rem;

	--as-leading-tight: 1.2;
	--as-leading: 1.65;

	--as-space-1: 0.25rem;
	--as-space-2: 0.5rem;
	--as-space-3: 0.75rem;
	--as-space-4: 1rem;
	--as-space-5: 1.5rem;
	--as-space-6: 2rem;
	--as-space-8: 3rem;
	--as-section: clamp(3.5rem, 8vw, 6rem);
	--as-gutter: clamp(1rem, 3vw, 1.5rem);
	--as-container: min(1120px, 100%);

	--as-radius: 12px;
	--as-radius-sm: 8px;
	--as-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
	--as-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.1);

	--as-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--as-fast: 180ms;

	--as-gradient-hero: linear-gradient(165deg, #ebf5f5 0%, #f1f5f9 45%, #f1f2f4 100%);
	--as-gradient-brand: linear-gradient(135deg, #115e59 0%, #0f172a 100%);
}