/**
 * Phase 1 — ArabiSEO design tokens (light mode)
 * Synced with arabi-seo-pro/app/styles/dashboard-tokens.css · app/lib/app-theme.ts
 * Shopify-admin canvas + deep teal luxury brand
 */

:root,
.as-root[data-theme="light"] {
	/* ── Canvas & surfaces (Shopify Polaris-aligned) ── */
	--as-color-canvas: #f1f2f4;
	--as-color-surface: #ffffff;
	--as-color-surface-muted: #f1f5f9;
	--as-color-teal-tint: #ebf5f5;
	--as-color-white: #ffffff;

	/* ── Text (slate scale — matches app) ── */
	--as-color-ink-950: #0f172a;
	--as-color-ink-800: #1e293b;
	--as-color-ink-700: #334155;
	--as-color-ink-600: #475569;
	--as-color-ink-500: #64748b;
	--as-color-ink-400: #94a3b8;
	--as-color-ink-300: #cbd5e1;
	--as-color-ink-200: #e2e8f0;
	--as-color-ink-100: #f1f5f9;

	/* ── Brand — deep teal + gold (app luxury theme) ── */
	--as-color-teal-800: #134e4a;
	--as-color-teal-700: #115e59;
	--as-color-teal-600: #0d9488;
	--as-color-teal-500: #14b8a6;
	--as-color-teal-100: #ccfbf1;
	--as-color-teal-50: #ebf5f5;

	--as-color-gold-600: #b45309;
	--as-color-gold-500: #d97706;
	--as-color-gold-400: #f59e0b;
	--as-color-gold-100: #fef3c7;

	/* ── Status ── */
	--as-color-success-600: #059669;
	--as-color-success-500: #10b981;
	--as-color-warning-500: #d97706;
	--as-color-danger-500: #dc2626;
	--as-color-info-500: #0ea5e9;

	/* ── Semantic aliases ── */
	--as-bg-canvas: var(--as-color-canvas);
	--as-bg-surface: var(--as-color-surface);
	--as-bg-elevated: var(--as-color-surface);
	--as-bg-muted: var(--as-color-surface-muted);
	--as-bg-accent-tint: var(--as-color-teal-tint);
	--as-bg-glass: rgba(255, 255, 255, 0.88);
	--as-bg-glass-border: rgba(15, 23, 42, 0.06);

	--as-text-primary: var(--as-color-ink-950);
	--as-text-secondary: var(--as-color-ink-700);
	--as-text-muted: var(--as-color-ink-500);
	--as-text-tertiary: var(--as-color-ink-500);
	--as-text-inverse: var(--as-color-white);

	--as-accent-primary: var(--as-color-teal-700);
	--as-accent-primary-hover: var(--as-color-teal-800);
	--as-accent-secondary: var(--as-color-teal-600);
	--as-accent-premium: var(--as-color-gold-500);
	--as-accent-premium-hover: var(--as-color-gold-600);
	--as-accent-growth: var(--as-color-success-600);

	--as-border-subtle: rgba(15, 23, 42, 0.05);
	--as-border-default: var(--as-color-ink-200);
	--as-border-strong: var(--as-color-ink-300);
	--as-grid-line: rgba(15, 23, 42, 0.04);

	--as-gradient-brand: linear-gradient(135deg, #115e59 0%, #0f172a 100%);
	--as-gradient-bar: linear-gradient(90deg, #115e59 0%, #134e4a 100%);
	--as-gradient-hero: linear-gradient(160deg, #ebf5f5 0%, #f1f5f9 48%, #f1f2f4 100%);

	/* ── Typography families ── */
	--as-font-display: "Cairo", "IBM Plex Sans Arabic", system-ui, sans-serif;
	--as-font-body: "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif;
	--as-font-mono: "IBM Plex Mono", ui-monospace, monospace;

	/* ── Fluid type scale ── */
	--as-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--as-text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
	--as-text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1rem);
	--as-text-md: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
	--as-text-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
	--as-text-xl: clamp(1.1875rem, 1.08rem + 0.55vw, 1.375rem);
	--as-text-2xl: clamp(1.375rem, 1.2rem + 0.85vw, 1.75rem);
	--as-text-3xl: clamp(1.625rem, 1.35rem + 1.35vw, 2.25rem);
	--as-text-4xl: clamp(2rem, 1.55rem + 2.25vw, 3rem);
	--as-text-5xl: clamp(2.375rem, 1.75rem + 3.1vw, 3.75rem);
	--as-text-hero: clamp(2.25rem, 1.65rem + 3vw, 3.5rem);

	--as-leading-tight: 1.15;
	--as-leading-snug: 1.35;
	--as-leading-normal: 1.65;
	--as-leading-relaxed: 1.8;

	--as-tracking-tight: -0.02em;
	--as-tracking-normal: 0;
	--as-tracking-wide: 0.04em;
	--as-tracking-arabic: 0;

	--as-weight-regular: 400;
	--as-weight-medium: 500;
	--as-weight-semibold: 600;
	--as-weight-bold: 700;
	--as-weight-black: 800;

	/* ── Fluid spacing (logical) ── */
	--as-space-1: 0.25rem;
	--as-space-2: 0.5rem;
	--as-space-3: 0.75rem;
	--as-space-4: 1rem;
	--as-space-5: 1.25rem;
	--as-space-6: 1.5rem;
	--as-space-8: 2rem;
	--as-space-10: 2.5rem;
	--as-space-12: 3rem;
	--as-space-16: 4rem;
	--as-space-section-y: clamp(3rem, 6vw, 5.5rem);
	--as-space-section-x: clamp(1.25rem, 4vw, 2.5rem);
	--as-space-gutter: clamp(1rem, 3vw, 1.75rem);

	/* ── Layout ── */
	--as-container-narrow: 42rem;
	--as-container-default: 72rem;
	--as-container-wide: 90rem;
	--as-sidebar-width: 16.5rem;
	--as-sidebar-collapsed: 4.5rem;
	--as-header-height: 3.75rem;
	--as-radius-sm: 0.5rem;
	--as-radius-md: 0.75rem;
	--as-radius-lg: 1rem;
	--as-radius-xl: 1.25rem;
	--as-radius-2xl: 1.5rem;
	--as-radius-pill: 999px;

	/* ── Elevation (app-matched soft shadows) ── */
	--as-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
	--as-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 16px rgba(15, 23, 42, 0.04);
	--as-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.05);
	--as-shadow-brand: 0 8px 24px rgba(17, 94, 89, 0.18);
	--as-shadow-gold: 0 4px 16px rgba(217, 119, 6, 0.12);
	--as-blur-glass: 12px;
	--as-grain-opacity: 0.018;

	/* ── Motion (Phase 4) ── */
	--as-spring-stiffness: 300;
	--as-spring-damping: 22;
	--as-duration-instant: 120ms;
	--as-duration-fast: 180ms;
	--as-duration-normal: 280ms;
	--as-duration-slow: 420ms;
	--as-ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
	--as-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--as-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

	--as-reveal-origin-x: 100%;
	--as-reveal-origin-y: 0%;
	--as-reveal-translate: 1.25rem;

	--as-z-base: 0;
	--as-z-dropdown: 100;
	--as-z-sticky: 200;
	--as-z-overlay: 400;
	--as-z-modal: 500;
	--as-z-toast: 600;
}

/* Premium CTA surfaces (hero card, primary metric — from app metricCardPrimary) */
.as-surface-brand {
	--as-bg-surface: transparent;
	--as-text-primary: var(--as-color-white);
	--as-text-secondary: rgba(255, 255, 255, 0.88);
	--as-text-muted: rgba(255, 255, 255, 0.72);
	background: var(--as-gradient-brand);
	box-shadow: var(--as-shadow-brand);
	color: var(--as-text-primary);
}