/**
 * Design Tokens — Packaging Commerce
 *
 * Neutral development placeholders. Replace every value in this file
 * when the brand identity is confirmed. Do not scatter brand values
 * into component files — all brand decisions must live here.
 *
 * Naming convention: --brand-* prefix, no product-name prefix.
 * This allows the business to update brand values in one place.
 *
 * Do not import: Almutaheda values, purple #7027B8, navy #102A43,
 * sand #CDAA7D, or any other Almutaheda-specific token.
 */

:root {

	/* ── Color palette ─────────────────────────────────────────── */

	/*
	 * Primary action color.
	 * Neutral blue-gray during development.
	 * Replace with confirmed brand primary before launch.
	 */
	--brand-color-primary:      #F28C00;
	--brand-color-primary-dark: #D97706;
	--brand-color-primary-soft: #FFF8EE;

	/*
	 * Secondary — supporting brand color.
	 */
	--brand-color-secondary:    #E65100;

	/*
	 * Accent — highlight, badges, emphasis.
	 */
	--brand-color-accent:       #FF3B1F;

	/* Text hierarchy */
	--brand-color-ink:          #333333;
	--brand-color-muted:        #777777;

	/* Surfaces */
	--brand-color-surface:      #FFFFFF;
	--brand-color-surface-alt:  #F8F9FA;

	/* Footer */
	--brand-color-footer:       #444444;

	/* Borders */
	--brand-color-border:       #E5E7EB;

	/* Semantic */
	--brand-color-success:      #15803D;
	--brand-color-success-bg:   #F0FDF4;
	--brand-color-danger:       #DC2626;
	--brand-color-danger-bg:    #FEF2F2;
	--brand-color-warning:      #F28C00;
	--brand-color-warning-bg:   #FFF8EE;
	--brand-color-info:         #1D4ED8;
	--brand-color-info-bg:      #EFF6FF;

	/* WhatsApp — official green, never change */
	--brand-color-whatsapp:     #25D366;
	--brand-color-whatsapp-dark:#128C7E;

	/* ── Typography ────────────────────────────────────────────── */

	/*
	 * Font role tokens.
	 *
	 * Primary UI font: IBM Plex Sans Arabic, loaded via Google Fonts
	 * (see pkgc_enqueue_assets() in inc/enqueue.php — 'pkgc-fonts' handle).
	 * System fallbacks keep text rendering correctly if the font request
	 * fails or is blocked, so nothing ever depends on the webfont loading.
	 *
	 * Self-hosting note: to remove the Google Fonts network request later,
	 * download the IBM Plex Sans Arabic woff2 files, add @font-face rules
	 * to base.css, and drop the 'pkgc-fonts' enqueue in inc/enqueue.php —
	 * this token value does not need to change.
	 */
	--brand-font-heading: 'IBM Plex Sans Arabic', Tahoma, 'Arial', sans-serif;
	--brand-font-body:    'IBM Plex Sans Arabic', Tahoma, 'Arial', sans-serif;
	--brand-font-latin:   system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Type scale — 1.25 Major Third, anchored at 16px */
	--brand-text-xs:    0.75rem;   /* 12px */
	--brand-text-sm:    0.875rem;  /* 14px */
	--brand-text-base:  1rem;      /* 16px */
	--brand-text-md:    1.125rem;  /* 18px */
	--brand-text-lg:    1.25rem;   /* 20px */
	--brand-text-xl:    1.5rem;    /* 24px */
	--brand-text-2xl:   1.875rem;  /* 30px */
	--brand-text-3xl:   2.25rem;   /* 36px */
	--brand-text-4xl:   3rem;      /* 48px */
	--brand-text-5xl:   3.5rem;    /* 56px */

	/* Line heights */
	--brand-leading-tight:   1.25;
	--brand-leading-snug:    1.375;
	--brand-leading-normal:  1.6;
	--brand-leading-relaxed: 1.75;

	/* Weights */
	--brand-weight-regular:  400;
	--brand-weight-medium:   500;
	--brand-weight-semibold: 600;
	--brand-weight-bold:     700;

	/* ── Layout ────────────────────────────────────────────────── */

	/* Maximum content width — matches Bootstrap container-xl */
	--brand-container: 1200px;

	/* Border radii */
	--brand-radius-sm: 0.25rem;   /* 4px  */
	--brand-radius-md: 0.5rem;    /* 8px  */
	--brand-radius-lg: 1rem;      /* 16px */
	--brand-radius-xl: 1.5rem;    /* 24px */
	--brand-radius-full: 9999px;

	/* Elevation */
	--brand-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--brand-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
	                   0 2px 4px -2px  rgb(0 0 0 / 0.1);
	--brand-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
	                   0 4px 6px -4px   rgb(0 0 0 / 0.1);

	/* ── Spacing (4px base) ────────────────────────────────────── */

	--brand-space-1:  0.25rem;   /* 4px  */
	--brand-space-2:  0.5rem;    /* 8px  */
	--brand-space-3:  0.75rem;   /* 12px */
	--brand-space-4:  1rem;      /* 16px */
	--brand-space-5:  1.25rem;   /* 20px */
	--brand-space-6:  1.5rem;    /* 24px */
	--brand-space-8:  2rem;      /* 32px */
	--brand-space-10: 2.5rem;    /* 40px */
	--brand-space-12: 3rem;      /* 48px */
	--brand-space-16: 4rem;      /* 64px */
	--brand-space-20: 5rem;      /* 80px */

	/* ── Transitions ───────────────────────────────────────────── */

	--brand-transition-fast:   150ms ease;
	--brand-transition-base:   250ms ease;
	--brand-transition-slow:   400ms ease;

	/* ── Motion (entrance animation + easing) ─────────────────────
	   Distinct from --brand-transition-* above, which are for hover/
	   focus state changes. These tokens are for the entrance-animation
	   system (assets/css/components/motion.css) and sticky CTA reveal.
	   Kept subtle and fast per the "premium, not playful" direction —
	   nothing here should exceed ~450ms. */

	--brand-motion-fast: 160ms;
	--brand-motion-base: 260ms;
	--brand-motion-slow: 420ms;

	/* Standard deceleration curve — soft landing, no overshoot. */
	--brand-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
	/* Slight overshoot for "pop" feedback (success pulse, soft-pop). */
	--brand-motion-pop:  cubic-bezier(0.34, 1.56, 0.64, 1);

	/* ── Z-index ladder ────────────────────────────────────────── */

	--brand-z-dropdown: 1000;
	--brand-z-sticky:   1020;
	--brand-z-fixed:    1030;
	--brand-z-modal:    1050;
	--brand-z-toast:    1070;
}