/*
 * A2 Javaherian Watch Bazaar — design tokens.
 *
 * A premium, jewelry-gallery aesthetic: deep ink charcoal, warm gold accent,
 * and soft ivory surfaces. RTL-first, mobile-first. Shared by the admin
 * console and the public/portal frontends so the whole project feels cohesive.
 */

.a2-jwb,
.a2-jwb-public,
.a2-jwb-portal,
.a2-jwb-operator,
.a2-jwb-admin {
	/* Surfaces */
	--a2-jwb-color-bg: #f4f2ee;
	--a2-jwb-color-surface: #ffffff;
	--a2-jwb-color-surface-muted: #f7f5f1;
	--a2-jwb-color-surface-sunken: #efece6;

	/* Text */
	--a2-jwb-color-text: #2a2d34;
	--a2-jwb-color-heading: #15171c;
	--a2-jwb-color-muted: #767a85;

	/* Lines */
	--a2-jwb-color-border: #e6e2da;
	--a2-jwb-color-border-strong: #d3cdc1;

	/* Brand */
	--a2-jwb-color-primary: #15171c;        /* ink charcoal */
	--a2-jwb-color-primary-hover: #2a2d34;
	--a2-jwb-color-primary-contrast: #ffffff;
	--a2-jwb-color-accent: #b08d4f;          /* warm gold */
	--a2-jwb-color-accent-hover: #9c7b40;
	--a2-jwb-color-accent-soft: #f3ead9;
	--a2-jwb-color-accent-contrast: #ffffff;

	/* Semantic */
	--a2-jwb-color-success: #1f7a43;
	--a2-jwb-color-success-bg: #e9f6ee;
	--a2-jwb-color-warning: #9a6a00;
	--a2-jwb-color-warning-bg: #fbf3df;
	--a2-jwb-color-danger: #b4232a;
	--a2-jwb-color-danger-bg: #fcecec;
	--a2-jwb-color-info: #1f5c8a;
	--a2-jwb-color-info-bg: #eaf3fa;

	/* Typography */
	--a2-jwb-font-family: "Vazirmatn", "IRANSansX", "IRANSans", "Segoe UI", Tahoma, system-ui, sans-serif;
	--a2-jwb-font-size-xs: 0.78rem;
	--a2-jwb-font-size-sm: 0.86rem;
	--a2-jwb-font-size-md: 0.98rem;
	--a2-jwb-font-size-lg: 1.18rem;
	--a2-jwb-font-size-xl: 1.5rem;
	--a2-jwb-font-size-2xl: 1.9rem;
	--a2-jwb-line-height: 1.75;

	/* Spacing scale */
	--a2-jwb-space-1: 4px;
	--a2-jwb-space-2: 8px;
	--a2-jwb-space-3: 12px;
	--a2-jwb-space-4: 16px;
	--a2-jwb-space-5: 20px;
	--a2-jwb-space-6: 24px;
	--a2-jwb-space-8: 32px;
	--a2-jwb-space-10: 40px;

	/* Radius */
	--a2-jwb-radius-sm: 6px;
	--a2-jwb-radius-card: 14px;
	--a2-jwb-radius-button: 10px;
	--a2-jwb-radius-pill: 999px;

	/* Elevation */
	--a2-jwb-shadow-card: 0 1px 2px rgba(21, 23, 28, 0.04), 0 12px 28px rgba(21, 23, 28, 0.06);
	--a2-jwb-shadow-raised: 0 12px 36px rgba(21, 23, 28, 0.12);
	--a2-jwb-ring-accent: 0 0 0 3px rgba(176, 141, 79, 0.25);

	/* Controls */
	--a2-jwb-button-height: 42px;
	--a2-jwb-input-height: 42px;
	--a2-jwb-card-min: 240px;
	--a2-jwb-mobile-breakpoint: 782px;

	color: var(--a2-jwb-color-text);
	direction: rtl;
	font-family: var(--a2-jwb-font-family);
	line-height: var(--a2-jwb-line-height);
}

.a2-jwb *,
.a2-jwb *::before,
.a2-jwb *::after,
.a2-jwb-admin *,
.a2-jwb-admin *::before,
.a2-jwb-admin *::after,
.a2-jwb-public *,
.a2-jwb-portal *,
.a2-jwb-operator * {
	box-sizing: border-box;
}

/*
 * Storefront-matching palette for PUBLIC surfaces only (landing, seller portal,
 * identity form, buyer offer, payment page). Tuned to javaherian-gallery.com:
 * white surfaces, near-black text, luxury gold (#D4AF37) accent, and a teal /
 * turquoise primary CTA. The admin console keeps its own calmer palette.
 */
.a2-jwb-public,
.a2-jwb-portal {
	--a2-jwb-color-bg: #ffffff;
	--a2-jwb-color-surface: #ffffff;
	--a2-jwb-color-surface-muted: #f7f8f8;
	--a2-jwb-color-surface-sunken: #f1f3f3;

	--a2-jwb-color-text: #1a1a1a;
	--a2-jwb-color-heading: #0d0d0d;
	--a2-jwb-color-muted: #6b6f73;

	--a2-jwb-color-border: #e8e8e8;
	--a2-jwb-color-border-strong: #d6d6d6;

	/* Primary CTA = the storefront's brand GOLD (verified from the live site;
	   the previous teal was an off-brand leftover). */
	--a2-jwb-color-primary: #c29b43;
	--a2-jwb-color-primary-hover: #6a4d00;
	--a2-jwb-color-primary-contrast: #181208;

	/* Accent = the storefront's luxury gold. */
	--a2-jwb-color-accent: #d4b45f;
	--a2-jwb-color-accent-hover: #b8932a;
	--a2-jwb-color-accent-soft: #faf3df;
	--a2-jwb-color-accent-contrast: #1a1a1a;

	--a2-jwb-ring-accent: 0 0 0 3px rgba(212, 180, 95, 0.30);
	--a2-jwb-ring-primary: 0 0 0 3px rgba(212, 180, 95, 0.25);
}