/* ==========================================================================
   MBAK Commerce — Design Tokens
   Single source of truth: colors, spacing, type, radii, shadows, motion.
   "Graphite + Electric Blue", light-first. Material + Apple influences.
   ========================================================================== */

:root {
	/* --- Brand / accent (electric blue) ------------------------------------ */
	--color-accent: #0a84ff;
	--color-accent-strong: #0066d6;
	--color-accent-press: #0053ac;
	--color-accent-soft: #e8f2ff;
	--color-accent-contrast: #ffffff;

	/* --- Graphite neutral scale -------------------------------------------- */
	--graphite-950: #0b0b0f;
	--graphite-900: #15171c;
	--graphite-800: #1f232b;
	--graphite-700: #2c313b;
	--graphite-600: #424955;
	--graphite-500: #5b616e;
	--graphite-400: #828997;
	--graphite-300: #aeb4bf;
	--graphite-200: #d7dbe2;
	--graphite-100: #e9ebef;
	--graphite-50:  #f5f6f8;

	/* --- Semantic surfaces & text ------------------------------------------ */
	--color-bg: #ffffff;
	--color-surface: var(--graphite-50);
	--color-surface-2: var(--graphite-100);
	--color-elevated: #ffffff;
	--color-text: var(--graphite-950);
	--color-text-muted: var(--graphite-500);
	--color-text-faint: #6b7280;  /* decorative / placeholder only; AA-safe */
	--color-border: var(--graphite-200);
	--color-border-strong: var(--graphite-300);

	/* --- Status ------------------------------------------------------------ */
	--color-success: #1b7a37;       /* AA on white + on success-soft */
	--color-success-soft: #e7f7ec;
	--color-warning: #9a5f00;
	--color-warning-soft: #fff3e0;
	--color-danger: #c02b22;        /* AA on white + on danger-soft */
	--color-danger-soft: #fdeceb;
	--color-sale: #c02b22;
	--color-star: #f59e0b;

	/* --- Focus ------------------------------------------------------------- */
	--color-focus: #0a84ff;

	/* --- Typography -------------------------------------------------------- */
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

	/* Fluid type scale (min .. max via clamp). Base = 16px. */
	--fs-xs:   0.78rem;                                  /* 12.5px */
	--fs-sm:   0.875rem;                                 /* 14px   */
	--fs-base: 1rem;                                     /* 16px   */
	--fs-md:   1.0625rem;                                /* 17px   */
	--fs-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
	--fs-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
	--fs-2xl:  clamp(1.75rem, 1.45rem + 1.5vw, 2.25rem);
	--fs-3xl:  clamp(2.25rem, 1.7rem + 2.6vw, 3.25rem);
	--fs-4xl:  clamp(2.75rem, 2rem + 3.6vw, 4rem);

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--lh-tight: 1.15;
	--lh-snug: 1.3;
	--lh-normal: 1.6;
	--tracking-tight: -0.02em;
	--tracking-normal: 0;

	/* --- Spacing scale (4px base) ------------------------------------------ */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;

	/* --- Layout ------------------------------------------------------------ */
	--container: 1360px;
	--container-wide: 1560px;
	--container-narrow: 760px;
	--gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
	--header-height: 72px;

	/* --- Radii ------------------------------------------------------------- */
	--radius-sm: 8px;
	--radius: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-pill: 999px;

	/* --- Shadows (soft Apple + Material elevation) ------------------------- */
	--shadow-1: 0 1px 2px rgba(11, 11, 15, 0.06), 0 1px 3px rgba(11, 11, 15, 0.05);
	--shadow-2: 0 4px 12px rgba(11, 11, 15, 0.07), 0 2px 4px rgba(11, 11, 15, 0.05);
	--shadow-3: 0 12px 28px rgba(11, 11, 15, 0.12), 0 4px 10px rgba(11, 11, 15, 0.06);
	--shadow-focus: 0 0 0 4px rgba(10, 132, 255, 0.28);

	/* --- Motion ------------------------------------------------------------ */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--transition-fast: 120ms var(--ease);
	--transition: 200ms var(--ease);
	--transition-slow: 360ms var(--ease-out);

	/* --- Z-index scale ----------------------------------------------------- */
	--z-base: 1;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-header: 300;
	--z-drawer: 400;
	--z-modal: 500;
	--z-toast: 600;
}