/* ================================================
   AMOTZ WIDGETS — design tokens + fonts
   ================================================
   Loaded before every other Amotz stylesheet.

   The site is built directly on Hello Elementor with no child theme, and the deployment
   model is plugin-only — so anything the widgets need must ship in this zip or it will not
   exist on the target site.

   Font paths are relative to THIS file (assets/css/), hence `../fonts/`.
   ================================================ */

/*
  ============================================================================
  DESIGN TOKENS — read from the Figma file (G6kY3YHkra1H3DL5wTCI0R)
  ============================================================================

  Sampled from the design, not invented. This file GROWS as sections land — a token is
  added when a second section is measured to share the value, not speculatively.

  Use the variables in Elementor (any colour field accepts var(--az-gold-1)) rather than
  pasting hex codes: when the designer changes a colour, it changes in one place.
*/
:root {
	/* --- Announcement bar gradient (566:9807) ---------------------------------
	   Figma exports this band as a flat PNG (1024x640, 944 KB) rather than as a gradient
	   fill. Sampling the bitmap across its width showed the three sampled rows agree to
	   within a couple of values, i.e. it is a purely HORIZONTAL ramp — so it is reproduced
	   here as a CSS gradient instead of shipping a 944 KB image for a 46px strip.

	   Stops are the sampled pixels at each 10% of the source image's width. */
	--az-gold-1: #D5B413;
	--az-gold-2: #B69101;
	--az-gold-3: #AB7B00;
	--az-gold-4: #9A6900;
	--az-gold-5: #916000;
	--az-gold-6: #8D5D00;
	--az-gold-7: #865800;
	--az-gold-8: #7B4E08;
	--az-gold-9: #6F4314;
	--az-gold-10: #532C0C;

	/* `to right` is PHYSICAL, not logical — the design's bright end is on the canvas left
	   and must stay there regardless of the page's RTL direction. Do not swap this to
	   `to inline-end`. */
	--az-gradient-gold: linear-gradient(
		to right,
		var(--az-gold-1) 0%,
		var(--az-gold-2) 10%,
		var(--az-gold-3) 20%,
		var(--az-gold-4) 30%,
		var(--az-gold-5) 40%,
		var(--az-gold-6) 50%,
		var(--az-gold-6) 60%,
		var(--az-gold-7) 70%,
		var(--az-gold-8) 80%,
		var(--az-gold-9) 90%,
		var(--az-gold-10) 100%
	);

	/* Text */
	--az-on-gold: #FFFFFF;

	/* Layout */
	--az-shell: 1440px; /* max page width — the design's frame width */

	/* Surfaces — sampled from the design
	   ------------------------------------------------------------------
	   Named for what they ARE, not where they first appeared, so a second section reusing
	   one does not have to reference an unrelated section's name. */
	--az-cream: #F6F4EE;   /* page background (566:9876) */
	--az-yellow: #EBC55B;  /* the mustard feature card (566:9877) */
	--az-ink: #0C0C0C;     /* dark band behind the icon strip (566:9840) */
	--az-rule: #CEAF83;    /* hairline top/bottom border on the dark band */

	/* Text */
	--az-on-gold: #FFFFFF;
	--az-brown: #472D00;   /* headline + body inside the yellow card */
	--az-on-ink: #FFFFFF;
	--az-on-ink-muted: #9CA3AF; /* the small caps labels under each stat */

	/* Type
	   ------------------------------------------------------------------
	   EVERY text node in this design is Polin — verified across three separate sections
	   (566:9807 Medium, 566:9840 Semibold/Bold/Medium, 566:9876 Bold/Medium). There is no
	   second family anywhere in the file, so there is no --az-font-body/-heading split to
	   make: one variable, used everywhere.

	   The face is installed via Elementor Pro → Custom Fonts, NOT by this stylesheet. Do
	   not add an @font-face for Polin here — Elementor already emits one, and a second
	   declaration of the same family is how a font ends up loading twice. See the note in
	   amotz-widgets.php.

	   The fallbacks are the standard Hebrew-capable system stack, for the moment before
	   Elementor's stylesheet parses and for the rare client without it. */
	--az-font: 'Polin', 'Arial Hebrew', 'Noto Sans Hebrew', Arial, sans-serif;

	/* Kept as aliases so section stylesheets written against the earlier names still
	   resolve. Both point at the same family — see above. */
	--az-font-heading: var(--az-font);
	--az-font-body: var(--az-font);
}

/*
  ============================================================================
  FONTS — DELIBERATELY NOT DECLARED IN THIS FILE
  ============================================================================

  There is no @font-face block here and no @import, and that is the design of it.

  Polin is installed as an Elementor Pro **Custom Font** (Elementor → Custom Fonts → Polin),
  with five variations uploaded as woff2:

      300  Light        polin-light.woff2
      400  Regular      polin-regular.woff2
      500  Medium       polin-medium.woff2      ← announcement bar, body copy
      600  SemiBold     polin-semibold.woff2    ← stat labels
      700  Bold         polin-bold.woff2        ← section headlines

  Elementor emits the @font-face for those, serves the files from the media library, and
  lists "Polin" in every Typography control. This stylesheet only NAMES the family in
  --az-font; it does not define it.

  A NOTE ON THE FILES: the supplied family (Polin-Sans-Font-Family.zip) ships OTF and TTF
  only. The TTFs are ~280 KB each. They were converted to woff2 before upload — ~47 KB each,
  17% of the original — because five weights at TTF size is 1.4 MB of blocking font on a
  landing page. Hebrew coverage was checked after conversion: 27/27 letters, 804 glyphs, in
  every weight.

  If a weight ever needs re-uploading, convert the TTF rather than uploading it raw.
*/