/* ============================================================
   IDO — design tokens (exported from Figma variables, file I429bpqimC3KmAI6VuhbHH, 2026-10-19)
   Collections: Primitives (18) · Color Light/Dark (21, aliased) · Spacing (10) · Radius (5)
   The site uses the LIGHT mode. Dark values are listed for later (not used in v1).
   Names match Figma code syntax exactly (var(--color-…), var(--space-…), var(--radius-…)).
   ============================================================ */
:root {
  /* ---- Primitives ---- */
  --color-ink-50:  #f4f4f6;
  --color-ink-100: #dddde1;
  --color-ink-200: #c7c7cc;
  --color-ink-300: #ababb3;
  --color-ink-400: #8c8c95;
  --color-ink-500: #6d6d78;
  --color-ink-600: #50505d;
  --color-ink-700: #353543;
  --color-ink-800: #1c1b2a;
  --color-ink-900: #0d0c1a;
  --color-ink-950: #04030f;
  --color-watermelon-400: #fd405f;
  --color-watermelon-500: #ef3054;
  --color-watermelon-600: #e6244d;
  --color-watermelon-700: #c90037;
  --color-yellow-green-500: #b0db43;
  --color-yellow-green-700: #547700;
  --color-white: #ffffff;

  /* ---- Semantic · Light (site default) ---- */
  --color-bg-page:            var(--color-ink-50);      /* soft panels, cards, mockup surfaces */
  --color-bg-surface:         var(--color-white);       /* section background */
  --color-bg-surface-raised:  var(--color-ink-100);
  --color-bg-inverse:         var(--color-ink-950);     /* footer */
  --color-text-primary:       var(--color-ink-950);
  --color-text-secondary:     var(--color-ink-600);
  --color-text-muted:         var(--color-ink-500);
  --color-text-disabled:      var(--color-ink-400);     /* also the "unfilled" colour of scroll-fill statements */
  --color-text-inverse:       var(--color-ink-50);
  --color-border-subtle:      var(--color-ink-100);
  --color-border-default:     var(--color-ink-200);
  --color-border-strong:      var(--color-ink-400);
  --color-brand-primary:         var(--color-watermelon-500);
  --color-brand-primary-hover:   var(--color-watermelon-400);
  --color-brand-primary-pressed: var(--color-watermelon-600);
  --color-brand-text:         var(--color-watermelon-700); /* red TEXT on white (AA) */
  --color-on-brand-primary:   var(--color-ink-950);     /* LOCKED: black label on red button (Ido's decision) */
  --color-accent-signal:      var(--color-yellow-green-700);
  --color-status-error:       var(--color-watermelon-700);
  --color-status-success:     var(--color-yellow-green-700);
  --color-focus-ring:         var(--color-ink-950);

  /* Decorative green (shapes, discs, badges, pills, markers, lesson card) = yellow-green/500 directly */
  --color-deco-green: var(--color-yellow-green-500);

  /* ---- Spacing ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* ---- Radius ---- */
  --radius-sm: 10px;  /* fields */
  --radius-md: 16px;  /* form step cards */
  --radius-lg: 24px;  /* service cards, drag cursor */
  --radius-xl: 40px;  /* work surface panel */
  --radius-pill: 9999px;
  /* used ad hoc in Figma: 32 (case panels/cards), 48 (case mockup panel, tool pills), 4 (checkbox, markers) */
  --radius-2xl: 32px;
  --radius-3xl: 48px;

  /* ---- Layout ---- */
  --page-max: 1440px;
  --gutter-desktop: 80px;   /* 12 col, margin 80, gutter 24 */
  --gutter-tablet: 40px;    /* 8 col, margin 40, gutter 20 */
  --gutter-mobile: 20px;    /* 4 col, margin 20, gutter 16 */
  --screen-h: 690px;        /* every desktop section = one laptop screen (1440×690) except hero 1024, tools 320, footer 300 */

  /* ---- Elevation (from Figma effects) ---- */
  --shadow-card:   0 24px 48px rgba(4, 3, 15, 0.10);          /* service cards */
  --shadow-mockup: 0 24px 48px -12px rgba(13, 13, 26, 0.14);  /* laptop on work surface */
  --shadow-device: 0 40px 80px -20px rgba(4, 3, 15, 0.16);    /* mockup lid / phone body */
  --shadow-pill:   0 4px 12px rgba(4, 3, 15, 0.08);           /* white slot pills */
  --shadow-cursor: 0 8px 24px rgba(4, 3, 15, 0.12);           /* drag cursor */
  --shadow-photo:  -1px 1px 7.3px rgba(0, 0, 0, 0.25);        /* bio portrait */
  --shadow-btn:       0 4px 10px -4px rgba(4, 3, 15, 0.10);   /* Figma 22:3 (handoff said .35) */
  --shadow-btn-hover: 0 10px 24px -4px rgba(4, 3, 15, 0.18);   /* Figma 22:10 (handoff said .30) */
  --shadow-btn-press: inset 0 2px 4px rgba(4, 3, 15, 0.22);    /* Figma 22:17 (handoff said .25) */

  /* ---- Motion easings (see MOTION-SPEC.md) ---- */
  --ease-reveal:   cubic-bezier(.16, 1, .3, 1);
  --ease-big-move: cubic-bezier(.76, 0, .24, 1);
  --ease-stamp:    cubic-bezier(.2, 1.3, .4, 1);
  --ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* Dark mode values exist in Figma (Color → Dark) but are NOT part of v1:
   bg/page ink-950 · bg/surface ink-900 · bg/surface-raised ink-800 · bg/inverse ink-50 · text/primary ink-50 ·
   text/secondary ink-300 · text/muted ink-400 · text/disabled ink-600 · text/inverse ink-950 · border subtle ink-800 /
   default ink-700 / strong ink-500 · brand/text watermelon-400 · accent/signal yellow-green-500 · focus/ring yellow-green-500 */

/* ============================================================
   Build additions (not Figma variables) — Phase 1/2, 2026-10-19
   ============================================================ */

/* Desktop canvas unit. 1px at ≥ 1440 (Figma), scales the whole composition down to 1200.
   Set on each .px-scope element (page blocks: .sec, .footer .canvas, .nav__inner) from its container's width (cqw = without the
   scrollbar), registered so it is computed ONCE there and inherited as a fixed length (nested containers such as
   the mockups must not re-resolve it). Below 1200 it stays 1px and nothing uses it. */
@property --px { syntax: "<length>"; inherits: true; initial-value: 1px; }
:root {
  /* ---- Font stacks ----
     FUP fonts carry Hebrew, digits and punctuation only. Latin letters fall through to Noto Sans
     (Ido, 2026-10-19: Noto Sans = the stand-in Figma shows). */
  --font-display: "FUP Sataf", "Noto Sans", sans-serif;
  --font-heading: "FUP Caesarea", "Noto Sans", sans-serif;
  --font-body:    "FUP Begin", "Noto Sans", sans-serif;
  --font-en:      "Syncopate", "Noto Sans", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;

  /* ---- Type scale (TYPE.md) — mobile < 768 values; tablet and desktop below ---- */
  --fs-h1: min(56px, 14.36vw); --lh-h1: min(56px, 14.36vw); /* 56 from 390 up (Figma); shrinks below 390 so «אתרים» (282 px at 56) fits a 320 screen */
  --fs-h1-contact: 48px;   --lh-h1-contact: 52px;
  --fs-h1-en: 48px;        --lh-h1-en: 46px;     /* case hero */
  --fs-h1-en-list: 40px;   --lh-h1-en-list: 40px; /* 08 work titles */
  --fs-h2: 36px;           --lh-h2: 44px;
  --fs-display: 96px;      --lh-display: 86px;   /* 02 strip; 04 words use .t-display--words */
  --fs-display-words: min(80px, 20.5vw); --lh-display-words: min(76px, 19.5vw); /* 80/76 from 390 up; shrinks below so «עושה» (337 px at 80) fits 320 */
  --fs-display-s: 75px;    --lh-display-s: 68px;  /* card numbers */
  --fs-index: 64px;        --lh-index: 64px;      /* case index numbers */
  --fs-h3: 24px;           --lh-h3: 32px;
  --fs-statement-hero: 22px; --lh-statement-hero: 30px;
  --fs-statement: 20px;    --lh-statement: 28px;  /* 03; 04 + 09 use .t-statement--sm */
  --fs-statement-sm: 18px; --lh-statement-sm: 28px;
  --fs-p: 17px;            --lh-p: 28px;
  --fs-small: 15px;        --lh-small: 24px;
  --fs-label: 13px;        --lh-label: 18px;
  --fs-button: 16px;       --lh-button: 20px;
  --fs-label-en: 11px;     --lh-label-en: 14px;

  /* ---- Layout ---- */
  --gutter: var(--gutter-mobile);
  --gap: 16px;              /* grid gutter */
  --nav-h: 72px;

  /* ---- Motion durations (MOTION-SPEC "Global tokens") ---- */
  --dur-micro: 200ms;
  --dur-press: 120ms;
  --dur-base: 350ms;
  --dur-reveal: 900ms;
  --dur-big: 900ms;
  --stagger: 120ms;

  /* ---- Buttons (Figma 22:143) ---- */
  --btn-press-scale: 0.953; /* 163/171 — "shrink and sink" (Ido's rule) */
  --btn-press-y: 3px;
  --btn-hover-y: -2px;
}

@media (min-width: 768px) {
  :root {
    --fs-h1: 80px;           --lh-h1: 76px;
    --fs-h1-contact: 80px;   --lh-h1-contact: 76px;
    --fs-h1-en: 72px;        --lh-h1-en: 68px;
    --fs-h1-en-list: 56px;   --lh-h1-en-list: 54px;
    --fs-h2: 48px;           --lh-h2: 56px;
    --fs-display: 160px;     --lh-display: 148px;
    --fs-display-words: 160px; --lh-display-words: 148px;
    --fs-display-s: 72px;    --lh-display-s: 68px;
    --fs-index: 72px;        --lh-index: 68px;
    --fs-h3: 28px;           --lh-h3: 36px;
    --fs-statement-hero: 28px; --lh-statement-hero: 36px;
    --fs-statement: 24px;    --lh-statement: 32px;
    --fs-statement-sm: 24px; --lh-statement-sm: 32px;
    --fs-p: 18px;            --lh-p: 30px;
    --fs-label-en: 12px;     --lh-label-en: 16px;
    --gutter: var(--gutter-tablet);
    --gap: 20px;
    --nav-h: 96px;
  }
}

/* Desktop: large type scales with the canvas unit. Declared on :root AND on every .px-scope element (the blocks that
   set --px): a custom property resolves var() where it is declared, so it must be re-declared where --px is known. */
@media (min-width: 1200px) {
  :root, .px-scope {
    --fs-h1: calc(112 * var(--px));          --lh-h1: calc(104 * var(--px));
    --fs-h1-contact: calc(108 * var(--px));  --lh-h1-contact: calc(104 * var(--px));
    --fs-h1-en: calc(112 * var(--px));       --lh-h1-en: calc(104 * var(--px));
    --fs-h1-en-list: calc(80 * var(--px));   --lh-h1-en-list: calc(76 * var(--px));
    --fs-h2: calc(64 * var(--px));           --lh-h2: calc(72 * var(--px));
    --fs-display: calc(240 * var(--px));     --lh-display: calc(216 * var(--px));
    --fs-display-words: calc(240 * var(--px)); --lh-display-words: calc(216 * var(--px));
    --fs-display-s: calc(88 * var(--px));    --lh-display-s: calc(80 * var(--px));
    --fs-index: calc(96 * var(--px));        --lh-index: calc(96 * var(--px));
    --fs-h3: calc(32 * var(--px));           --lh-h3: calc(40 * var(--px));
    --fs-statement-hero: calc(32 * var(--px)); --lh-statement-hero: calc(40 * var(--px));
    --fs-statement: calc(28 * var(--px));    --lh-statement: calc(36 * var(--px));
    --fs-statement-sm: calc(28 * var(--px)); --lh-statement-sm: calc(36 * var(--px));
    --fs-label-en: 13px;     --lh-label-en: 18px;
    --gutter: var(--gutter-desktop);
    --gap: 24px;
    --nav-h: calc(120 * var(--px));
  }
}

/* ---- Laptop mode (Ido, 2026-10-19: "adapt to laptops and desktop sizes") ----
   Desktop width + a short window (his 13" MacBook Pro: 1440 × 693). Every section must fit one screen.
   Figma's sizes stay unchanged on windows ≥ 880 high. Values here are Claude's, for Ido to tune;
   section-specific ones (hero height, H1) are added and measured in Phase 2. */
/* --hk scales the hero composition (everything below the nav) so hero + nav fit the window on every desktop
   window lower than Figma's 1024 (Ido: one screen per section): k ≤ (H − 128 − 24) / 823, where 823 = Figma
   distance from the nav bottom to the scroll-hint bottom. Values are Claude's, for Ido to tune. */
:root { --hk: 1; }
@media (min-width: 1200px) and (max-height: 1023px) { :root { --hk: 0.88; } }  /* 880–1023 high */
@media (min-width: 1200px) and (max-height: 879px)  { :root { --hk: 0.76; } }  /* 780–879 */
@media (min-width: 1200px) and (max-height: 779px)  { :root { --hk: 0.66; } }  /* 700–779 */
@media (min-width: 1200px) and (max-height: 699px)  { :root { --hk: 0.64; } }  /* 680–699 — Ido's 13" laptop (1440 × 693) */
@media (min-width: 1200px) and (max-height: 679px)  { :root { --hk: 0.56; } }  /* < 680 */