/* ==========================================================================
   Design tokens — the single place for colors, fonts, type scale and spacing.
   To restyle the site (or a language), change values here only.
   ========================================================================== */

:root {
  /* ---- Color: two colors only, greys are derived from them ---- */
  --color-ink: #181818;
  --color-paper: #F5F5F3;

  --color-text: var(--color-ink);
  --color-bg: var(--color-paper);
  --color-text-muted: color-mix(in srgb, var(--color-ink) 70%, var(--color-paper));  /* ≈ #5A5A5A, 6.5:1 on paper */
  --color-line: color-mix(in srgb, var(--color-ink) 18%, var(--color-paper));        /* hairlines */
  --color-placeholder: color-mix(in srgb, var(--color-ink) 7%, var(--color-paper));  /* empty image / coming-soon blocks */

  /* ---- Fonts (Adobe Fonts kit oav5ugi, loaded in each page's <head>) ----
     Available weights — use only these:
       display: 400, 400i, 700, 700i   (large headings only)
       text:    400, 400i, 500, 500i, 700, 700i
     Never use 300, 600 or 800. */
  --font-fallback: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "neue-haas-grotesk-display", var(--font-fallback);
  --font-text: "neue-haas-grotesk-text", var(--font-fallback);

  --weight-regular: 400;   /* everything else on the site */
  --weight-medium: 500;    /* available in the kit, not used right now */
  --weight-bold: 700;      /* used only for "Niv Yagur" and "i" in the sidebar */
  /* A Light (300) weight isn't in the Adobe Fonts kit. To use one, add it to
     the kit first, then add --weight-light: 300 here. */

  --tracking-display: -0.02em;
  --tracking-label: 0.01em;

  /* ---- Type scale (fluid, mobile first) ---- */
  --step--1: 0.8125rem;                                   /* 13px  labels, meta */
  --step-0: 0.875rem;                                     /* 14px  body / running text */
  --step-1: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem); /* lead text */
  --step-2: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);      /* section headings */
  --step-3: clamp(2.25rem, 1.5rem + 3.6vw, 4.5rem);       /* project titles */

  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --line-text: 1.35625rem;   /* fixed line-height shared by project description and details (21.7px = 14px × 1.55) */

  /* ---- Space ---- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --space-xl: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --space-2xl: clamp(5rem, 3rem + 9vw, 11rem);

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);  /* page side padding */
  --page-top: var(--space-m);   /* space above the page content and the fixed sidebar (wide screens) */
  --page-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));   /* sidebar + 4 content columns (wide screens) */
  --grid-gap: clamp(1rem, 0.6rem + 2vw, 2rem);   /* gap between the 5 page columns, and in every grid inside them */
  --page-max: 110rem;
  --measure: 36rem;                                /* comfortable line length at 16px */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 700ms;
}

/* ---- Hebrew ----
   Neue Haas Grotesk has no Hebrew glyphs. Put the Hebrew font families here
   when you have them (add their Adobe Fonts kit link to each page's <head>).
   Until then a system Hebrew font is used. */
:lang(he) {
  --font-display: "Arial Hebrew", Arial, var(--font-fallback);
  --font-text: "Arial Hebrew", Arial, var(--font-fallback);
  --tracking-display: 0;   /* no negative tracking for Hebrew */
  --tracking-label: 0;
}