/* ============================================================
   פויקע'ס — Design Tokens
   מערכת עיצוב אחת, חמה, מחויבת: ברזל • אש • עץ • שמנת
   ============================================================ */

:root {
  /* ---------- Iron: warm neutral ramp (the cast iron itself) ---------- */
  --iron-950: #100E0C;
  --iron-900: #1A1714;
  --iron-800: #262119;
  --iron-700: #3A332A;
  --iron-600: #554C40;
  --iron-500: #766B5C;
  --iron-400: #9C9083;
  --iron-300: #C0B5A6;
  --iron-200: #DCD2C4;
  --iron-150: #E5DCCF;
  --iron-100: #EFE8DC;
  --iron-50:  #F8F4ED;

  /* ---------- Paper: the cream ground ---------- */
  --paper:    #FBF8F3;
  --paper-2:  #F4EEE4;
  --paper-3:  #EBE2D4;
  --white:    #FFFFFF;

  /* ---------- Ember: primary action (fire) ---------- */
  --ember-800: #6E2A0D;
  --ember-700: #8F3410;
  --ember-600: #A8431A;
  --ember-500: #C4551D;
  --ember-400: #DB6B2A;
  --ember-300: #EE8B45;
  --ember-200: #F7B584;
  --ember-100: #FCE1CC;
  --ember-50:  #FDF1E7;

  /* ---------- Brass: premium accent ---------- */
  --brass-700: #6E5528;
  --brass-600: #8C6D35;
  --brass-500: #AC8845;
  --brass-400: #C9A961;
  --brass-300: #DEC48C;
  --brass-100: #F2E7CE;

  /* ---------- Olive: quiet secondary (outdoors) ---------- */
  --olive-700: #37432C;
  --olive-600: #4A5A3C;
  --olive-500: #5F7049;
  --olive-400: #82945F;
  --olive-100: #E9EDE0;

  /* ---------- Semantic ---------- */
  --success-600: #226A42;
  --success-500: #2E7D52;
  --success-100: #E3F2E9;
  --warn-600:    #96620F;
  --warn-500:    #B4791A;
  --warn-100:    #FBF0DA;
  --danger-600:  #972E24;
  --danger-500:  #B23A2E;
  --danger-100:  #FBE7E4;
  --info-500:    #2D6A8F;
  --info-100:    #E3EFF6;

  /* ---------- Roles ---------- */
  --bg:            var(--paper);
  --bg-raised:     var(--white);
  --bg-sunken:     var(--paper-2);
  --bg-inset:      var(--paper-3);
  --text:          var(--iron-900);
  --text-soft:     var(--iron-600);
  /* --text-muted / --text-faint are NOT plain steps of the iron ramp.
     iron-500 and iron-400 are light enough to fail WCAG 1.4.3 (AA, 4.5:1)
     as body text on the cream grounds: iron-400 measured 2.95:1 on --paper
     and 2.70:1 on --paper-2, and both roles are used for real copy
     (VAT note, review bylines, "(optional)" field hints, mega-menu counts).
     These two values are the lightest that still clear 4.5:1 against
     --paper, --paper-2, --paper-3 AND --white — the four grounds they
     actually sit on. Keep the ramp tokens above for borders and fills. */
  --text-muted:    #625849;  /* 6.58 / 6.04 / 5.43 / 6.97 : 1 */
  --text-faint:    #6F6455;  /* 5.46 / 5.01 / 4.51 / 5.79 : 1 */
  --text-on-dark:  #F6F1E8;
  --text-on-dark-soft: rgba(246, 241, 232, .72);
  --text-on-dark-faint: rgba(246, 241, 232, .52);
  --line:          var(--iron-150);
  --line-soft:     var(--iron-100);
  --line-strong:   var(--iron-300);
  /* Boundary of a form control. WCAG 1.4.11 (AA) wants 3:1 for the visual
     information that identifies a component; an input's white fill is only
     1.03:1 against --paper, so the border is doing that job alone.
     iron-200 measured 1.49:1 and iron-300 2.02:1 — both fail. 3.47:1 here. */
  --line-field:    #948877;
  /* same job on the dark footer. --line-on-dark (.16) is a divider colour and
     measures 1.58:1 against --iron-900 — fine for a hairline, not enough to
     be the only thing marking out an input. .42 gives 3.78:1 against the
     footer ground and 3.27:1 against the field's own .06 fill. */
  --line-field-on-dark: rgba(246, 241, 232, .42);
  --line-on-dark:  rgba(246, 241, 232, .16);
  --accent:        var(--ember-500);
  --accent-hover:  var(--ember-600);
  --accent-active: var(--ember-700);
  --accent-soft:   var(--ember-50);
  --focus:         var(--ember-500);

  /* ---------- Typography ---------- */
  --font-sans: "Rubik", "Assistant", "Heebo", "Noto Sans Hebrew", "Segoe UI",
               -apple-system, BlinkMacSystemFont, "Arial Hebrew", Arial, sans-serif;
  --font-num:  "Rubik", "Segoe UI", -apple-system, Arial, sans-serif;

  --fs-display: clamp(2.5rem, 1.35rem + 5.1vw, 4.75rem);
  --fs-h1:      clamp(1.95rem, 1.3rem + 2.9vw, 3.25rem);
  --fs-h2:      clamp(1.6rem, 1.24rem + 1.6vw, 2.375rem);
  --fs-h3:      clamp(1.3rem, 1.14rem + .72vw, 1.75rem);
  --fs-h4:      clamp(1.125rem, 1.07rem + .25vw, 1.3rem);
  --fs-lg:      1.125rem;
  --fs-base:    1.0625rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;
  --fs-2xs:     .75rem;

  --lh-display: 1.04;
  --lh-heading: 1.18;
  --lh-snug:    1.42;
  --lh-body:    1.72;
  --lh-loose:   1.85;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --tr-display: -.022em;
  --tr-heading: -.014em;
  --tr-tight:   -.008em;
  --tr-wide:    .04em;
  --tr-caps:    .1em;

  /* ---------- Space (4px base) ---------- */
  --sp-0: 0;
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 1.75rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Section rhythm — fluid */
  --section-y:   clamp(3.5rem, 2rem + 5vw, 7rem);
  --section-y-sm: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);

  /* ---------- Radii ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-full: 999px;

  /* ---------- Shadows (warm, never blue-gray) ---------- */
  --sh-1: 0 1px 2px rgba(16,14,12,.05), 0 1px 1px rgba(16,14,12,.04);
  --sh-2: 0 2px 4px rgba(16,14,12,.05), 0 4px 12px rgba(16,14,12,.06);
  --sh-3: 0 4px 8px rgba(16,14,12,.05), 0 12px 28px rgba(16,14,12,.09);
  --sh-4: 0 8px 16px rgba(16,14,12,.06), 0 24px 56px rgba(16,14,12,.13);
  --sh-5: 0 16px 32px rgba(16,14,12,.08), 0 40px 88px rgba(16,14,12,.18);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6);
  --sh-ember: 0 4px 14px rgba(196,85,29,.26), 0 1px 3px rgba(196,85,29,.2);
  --sh-ember-lg: 0 8px 28px rgba(196,85,29,.34);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 140ms;
  --t:      240ms;
  --t-slow: 420ms;
  --t-xslow: 700ms;

  /* ---------- Layout ---------- */
  --container:    1296px;
  --container-md: 1080px;
  --container-sm: 760px;
  --gutter: clamp(1rem, .35rem + 2.2vw, 2.5rem);
  --header-h: 64px;
  --announce-h: 40px;

  /* ---------- Z-index ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-drawer: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-max: 999;

  /* ---------- Product image treatment ----------
     The source photos are real, warm, shot on wood.
     These filters normalise them into one consistent look. */
  --img-filter:       saturate(1.04) contrast(1.05) brightness(1.02);
  --img-filter-hover: saturate(1.12) contrast(1.08) brightness(1.05);
}

@media (min-width: 900px) {
  :root { --header-h: 76px; }
}

/* Reduced motion: collapse durations, keep state changes instant */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t: 1ms;
    --t-slow: 1ms;
    --t-xslow: 1ms;
  }
}