/*!
 * Baly Site System — Design Tokens
 *
 * Single source of truth for the visual language across every site-system
 * shortcode. Mirrors the canonical Baly Design System tokens
 * (baly-design-system/project/colors_and_type.css) but namespaced under
 * --bsy-* so the plugin can't collide with the food plugin (--bf-*),
 * the legacy service-mosaic (--bsm-*), or arbitrary theme CSS.
 *
 * Structure:
 *   1. Fonts (@font-face, served from baly.iq — same files used by the
 *      food and blog plugins, so the woff2 is warm in cache when a user
 *      hits a site-system page).
 *   2. Tokens at :root (prefixed --bsy-*).
 *   3. Optional scope helper .bsy-scope for hard-isolating components
 *      from theme overrides.
 */

/* ============================================================
   1. Fonts — only the 4 weights actually used (400/600/700/900).
   ------------------------------------------------------------
   font-display: optional on body weights — if the woff2 isn't
   ready by first paint we use the fallback stack and skip the
   swap (no FOUT). The 900 weight is hero-only so swap is fine.
   ============================================================ */
@font-face { font-family: "GraphikArabic"; font-display: swap; 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: swap; font-weight: 500; font-style: normal; src: url("https://baly.iq/wp-content/uploads/redux/custom-fonts/custom/Graphikarabic-medium2/Graphikarabic-medium2.woff2") format("woff2"); }
@font-face { font-family: "GraphikArabic"; font-display: swap; 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: swap; 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 ────────────────────────────────────────────── */
	--bsy-brand:           #0043FF;
	--bsy-brand-hover:     #0039E0;
	--bsy-brand-active:    #002FBF;
	--bsy-brand-light:     #B8C9FF;
	--bsy-brand-lighter:   #E6ECFF;
	--bsy-brand-10:        rgba(0, 67, 255, 0.10);
	--bsy-brand-20:        rgba(0, 67, 255, 0.20);

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

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

	/* ── Semantic roles ───────────────────────────────────── */
	--bsy-fg-primary:      var(--bsy-black);
	--bsy-fg-secondary:    var(--bsy-grey-600);
	--bsy-fg-tertiary:     var(--bsy-grey-400);
	--bsy-fg-inverse:      var(--bsy-white);
	--bsy-bg-primary:      var(--bsy-white);
	--bsy-bg-secondary:    var(--bsy-grey-100);
	--bsy-border-default:  var(--bsy-grey-200);
	--bsy-border-subtle:   var(--bsy-grey-100);

	/* ── Shadows ──────────────────────────────────────────── */
	--bsy-shadow-1:        0 1px 4px rgba(0,0,0,0.06);
	--bsy-shadow-2:        0 2px 12px rgba(0,0,0,0.10);
	--bsy-shadow-3:        0 8px 32px rgba(0,0,0,0.14);
	--bsy-shadow-card:     0 1px 0 rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.10), 0 32px 60px -24px rgba(0,30,80,.18);
	--bsy-shadow-brand:    0 4px 20px rgba(0, 67, 255, 0.25);
	--bsy-shadow-brand-lg: 0 8px 24px rgba(0, 67, 255, 0.28);

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

	/* ── Spacing (4px base) ───────────────────────────────── */
	--bsy-space-1:         4px;
	--bsy-space-2:         8px;
	--bsy-space-3:         12px;
	--bsy-space-4:         16px;
	--bsy-space-5:         20px;
	--bsy-space-6:         24px;
	--bsy-space-8:         32px;
	--bsy-space-10:        40px;
	--bsy-space-12:        48px;
	--bsy-space-16:        64px;
	--bsy-space-20:        80px;
	--bsy-space-24:        96px;

	/* ── Typography ───────────────────────────────────────── */
	--bsy-font: "GraphikArabic", "Segoe UI", "Helvetica Neue", system-ui, Arial, sans-serif;
	--bsy-fw-regular:  400;
	--bsy-fw-medium:   500;
	--bsy-fw-semibold: 600;
	--bsy-fw-bold:     700;
	--bsy-fw-black:    900;

	/* Type scale (px-based, paired with --bsy-leading-*) */
	--bsy-text-xs:    12px;
	--bsy-text-sm:    14px;
	--bsy-text-base:  16px;
	--bsy-text-md:    18px;
	--bsy-text-lg:    22px;
	--bsy-text-xl:    28px;
	--bsy-text-2xl:   36px;
	--bsy-text-3xl:   48px;
	--bsy-text-4xl:   64px;
	--bsy-text-hero:  80px;

	--bsy-leading-tight:   1.1;
	--bsy-leading-snug:    1.2;
	--bsy-leading-normal:  1.4;
	--bsy-leading-relaxed: 1.6;

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

/* ============================================================
   3. Optional scope — hard reset on top of the theme.
   Add class="bsy-scope" to a page wrapper if the theme is
   leaking styles into our shortcodes.
   ============================================================ */
.bsy-scope {
	font-family: var(--bsy-font);
	color: var(--bsy-fg-primary);
	direction: rtl;
	text-align: right;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.bsy-scope *, .bsy-scope *::before, .bsy-scope *::after { box-sizing: border-box; }

/* Force the Graphik Arabic family on every descendant of a Baly-scoped
 * shortcode. Without this, themes that set font-family on h1-h6/p/a/button
 * (or via .entry-content selectors) override our wrapper-level rule —
 * inheritance loses to a class-level selector. We win the specificity war
 * by selecting every descendant under .bsy-scope (specificity 0,1,0)
 * which beats theme element selectors (0,0,1). Themes that REALLY want
 * to override can still use a more specific class — we're not !important. */
.bsy-scope *,
.bsy-scope h1, .bsy-scope h2, .bsy-scope h3, .bsy-scope h4, .bsy-scope h5, .bsy-scope h6,
.bsy-scope p, .bsy-scope a, .bsy-scope span, .bsy-scope div, .bsy-scope li,
.bsy-scope button, .bsy-scope input, .bsy-scope textarea, .bsy-scope select {
	font-family: var(--bsy-font);
}