/*!
 * Baly Food Plugin — Design System Tokens
 *
 * Single source of truth for the visual language across every food
 * shortcode in this plugin. Mirrors the Baly Design System v1 tokens
 * (handover/design-tokens/colors_and_type.css) and follows the same
 * conventions as the Baly Blog plugin (font-display: optional, scoped
 * tokens, system fallback stack tuned for Arabic).
 *
 * Structure:
 *   1. Fonts (@font-face, hosted on baly.iq — same files used elsewhere)
 *   2. Tokens at :root (prefixed --bf-* — no theme collision)
 *   3. .baly-food-scope helper for opt-in component wrappers
 */

/* ============================================================
   1. Fonts
   ------------------------------------------------------------
   Only the four weights actually used across the plugin are
   declared (regular/semibold/bold/black). Weight 500 falls back
   to 400, weight 800 to 700/900 — saves five font downloads.
   `font-display: optional` means: if the woff2 isn't ready by
   first paint we use the system stack permanently for that view
   (no FOUT). The fallback stack below has Arabic-capable native
   UI fonts so the unswitched render still looks close-to-design.
   ============================================================ */
@font-face { font-family: "GraphikArabic"; font-display: optional; font-weight: 400; font-style: normal; src: url("https://baly.iq/wp-content/uploads/redux/custom-fonts/custom/Graphikarabic-regular2/Graphikarabic-regular2.woff2") format("woff2"); }
@font-face { font-family: "GraphikArabic"; font-display: optional; font-weight: 600; font-style: normal; src: url("https://baly.iq/wp-content/uploads/redux/custom-fonts/custom/Graphikarabic-semibold2/Graphikarabic-semibold2.woff2") format("woff2"); }
@font-face { font-family: "GraphikArabic"; font-display: optional; font-weight: 700; font-style: normal; src: url("https://baly.iq/wp-content/uploads/redux/custom-fonts/custom/Graphikarabic-bold2/Graphikarabic-bold2.woff2") format("woff2"); }
@font-face { font-family: "GraphikArabic"; font-display: swap;     font-weight: 900; font-style: normal; src: url("https://baly.iq/wp-content/uploads/redux/custom-fonts/custom/Graphikarabic-black2/Graphikarabic-black2.woff2") format("woff2"); }

/* ============================================================
   2. Tokens
   ============================================================ */
:root {
	/* Brand */
	--bf-brand:           #0043FF;
	--bf-brand-hover:     #0039E0;
	--bf-brand-active:    #002FBF;
	--bf-brand-light:     #B8C9FF;
	--bf-brand-lighter:   #E6ECFF;
	--bf-brand-10:        rgba(0, 67, 255, 0.10);
	--bf-brand-20:        rgba(0, 67, 255, 0.20);

	/* Neutrals */
	--bf-black:           #0A0A0A;
	--bf-grey-900:        #1A1A1A;
	--bf-grey-800:        #2E2E2E;
	--bf-grey-700:        #4A4A4A;
	--bf-grey-600:        #666666;
	--bf-grey-500:        #8A8A8A;
	--bf-grey-400:        #ADADAD;
	--bf-grey-300:        #CCCCCC;
	--bf-grey-200:        #E5E5E5;
	--bf-grey-100:        #F5F5F7;
	--bf-grey-50:         #FAFAFA;
	--bf-white:           #FFFFFF;

	/* Semantic */
	--bf-success:         #00A845;
	--bf-success-light:   #DFF5E7;
	--bf-error:           #D92D20;
	--bf-error-light:     #FEE9E7;
	--bf-warning:         #E08A00;
	--bf-warning-light:   #FFF3DB;

	/* Pro / promotional accent (rose, design-system signature) */
	--bf-pro:             #E11D48;
	--bf-pro-dark:        #9F1239;

	/* Roles */
	--bf-fg:              var(--bf-black);
	--bf-fg-2:            var(--bf-grey-600);
	--bf-fg-3:            var(--bf-grey-400);
	--bf-bg:              var(--bf-white);
	--bf-bg-2:            var(--bf-grey-100);
	--bf-bg-3:            var(--bf-grey-50);
	--bf-border:          var(--bf-grey-200);
	--bf-border-subtle:   var(--bf-grey-100);

	/* Radii */
	--bf-radius-xs:       4px;
	--bf-radius-sm:       8px;
	--bf-radius-md:       12px;
	--bf-radius-lg:       16px;
	--bf-radius-xl:       20px;
	--bf-radius-2xl:      28px;
	--bf-radius-pill:     999px;

	/* Shadows */
	--bf-shadow-1:        0 1px 4px rgba(0,0,0,0.06);
	--bf-shadow-2:        0 2px 12px rgba(0,0,0,0.10);
	--bf-shadow-3:        0 8px 32px rgba(0,0,0,0.14);
	--bf-shadow-brand:    0 4px 20px rgba(0, 67, 255, 0.25);

	/* Type — fallback stack favours native Arabic-capable UI fonts so
	   unswitched (font-display: optional) renders look close to spec. */
	--bf-font:            "GraphikArabic", "SF Arabic", "Segoe UI", "Tajawal", "Helvetica Neue", "Tahoma", Arial, sans-serif;

	/* Motion */
	--bf-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
	--bf-ease-in:         cubic-bezier(0.4, 0, 1, 1);
	--bf-fast:            150ms;
	--bf-base:            250ms;
	--bf-slow:            400ms;
}

/* ============================================================
   3. Scope helper
   ------------------------------------------------------------
   Apply on a wrapper element to enforce the design-system base
   (font, colour, RTL). Existing component roots also inherit
   the tokens directly via :root, so this is opt-in.
   ============================================================ */
.baly-food-scope {
	font-family: var(--bf-font);
	color: var(--bf-fg);
	direction: rtl;
	text-align: right;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "rlig" 1, "liga" 1, "calt" 1, "kern" 1, "ccmp" 1;
}
.baly-food-scope * {
	box-sizing: border-box;
}

/* Tabular figures for prices / counts (used widely) */
.baly-food-num {
	direction: ltr;
	unicode-bidi: isolate;
	font-feature-settings: "tnum" 1;
}