/* Motzafi — CSS variables from the design system's tokens.json
   (https://claude.ai/artifact/7hpWH93gSbxMvhCxsFy15S, version 1794242698-9eb1).
   Sync rule: every design-system change regenerates this file. Artboards use only these variables.
   Palette (from Roie's mock-up): light grey #EAEAEA / charcoal #3A3735 / dusty rose #986262, cream #F4EFE9 inside the charcoal band.
   Token names kept: "red" = the rose fill, "red-ink" = rose for large accent text, "accent-text" = darker rose for small text. */

/* Rubik 300 / 400 / 500 / 700, from the design system's font files (copied into this canvas as assets) */
@font-face { font-family: "Rubik"; src: url("d8483d972491feadf197bc42a05505dc.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("29f1a8cc8c72a0c6d41cfecc5c6d4303.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("6721897e54c62426baf3d7c43f4edc91.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("e66f6d1814c4ec911a306aae96a860ba.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
/* Headings: the display family always renders Rubik Bold, whatever weight an artboard sets */
@font-face { font-family: "Rubik Display"; src: url("e66f6d1814c4ec911a306aae96a860ba.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* color — light theme */
  --surface: #eaeaea;
  --surface-raised: #dfdedd;
  --ink: #3a3735;
  --ink-muted: #3a3735;
  --line: #d2d0ce;
  --red: #986262;
  --red-soft: #dfdedd;
  --on-red: #f4efe9;
  --red-ink: #986262;
  --accent-text: #7f4f4f;
  --image-outline: rgba(58, 55, 53, 0.1);

  /* shadow */
  --shadow-border: 0 0 0 1px rgba(58, 55, 53, 0.14);
  --shadow-border-hover: 0 0 0 1px rgba(58, 55, 53, 0.3);

  /* type */
  --font-display: "Rubik Display", "Rubik", "Arial Hebrew", system-ui, sans-serif;
  --font-sans: "Rubik", "Arial Hebrew", "Segoe UI", system-ui, sans-serif;
  --display-xl-size: 64px; --display-xl-lh: 68px;
  --display-l-size: 40px;  --display-l-lh: 48px;
  --title-size: 22px;      --title-lh: 30px;
  --body-l-size: 19px;     --body-l-lh: 30px;
  --body-size: 17px;       --body-lh: 28px;
  --label-size: 15px;      --label-lh: 20px;
  --caption-size: 13px;    --caption-lh: 18px;
  --display-tracking: 0;

  /* spacing */
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --space-24: 96px;

  /* radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* layout aliases (built from the tokens above) */
  --page-gutter: var(--space-10);
  --section-y: var(--space-24);
  --content-max: 1200px;
}

/* headings: Rubik needs no extra letter spacing (token kept so it can change in one place) */
h1, h2, h3 { letter-spacing: var(--display-tracking); }

/* mobile values named in the tokens' usage notes */
@media (max-width: 720px) {
  :root {
    --display-xl-size: 40px; --display-xl-lh: 44px;
    --display-l-size: 30px;  --display-l-lh: 38px;
    --page-gutter: var(--space-4);
    --section-y: 64px;
  }
}

/* dark theme — also used for the single dark band (contact) */
.theme-dark {
  --surface: #3a3735;
  --surface-raised: #46423f;
  --ink: #f4efe9;
  --ink-muted: #f4efe9;
  --line: #55504c;
  --red: #986262;
  --red-soft: #46423f;
  --on-red: #f4efe9;
  --red-ink: #f4efe9;
  --accent-text: #f4efe9;
  --image-outline: rgba(244, 239, 233, 0.14);
  --shadow-border: 0 0 0 1px rgba(244, 239, 233, 0.22);
  --shadow-border-hover: 0 0 0 1px rgba(244, 239, 233, 0.4);
}

/* behaviour from the README's motion rules (hover/press can't be written inline) */
.press {
  transition-property: scale, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.press:active { scale: 0.96; }
.lift {
  transition-property: box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.lift:hover { box-shadow: var(--shadow-border-hover); }
.text-link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .press, .lift { transition: none; }
}

/* flat surface: the page background is plain light grey (README › צבע). Page wrappers and light sections are
   see-through so the body colour shows; the charcoal band (.theme-dark) and palette-experiment pages keep their own. */
body {
  background-color: var(--surface);
}
main:not([class*="palette-"]),
section:not(.theme-dark):not([class*="palette-"] *) {
  background-color: transparent !important;
  background-image: none !important;
}

/* big screens (up to 4K): the layout was drawn at 1440. Past 1920 CSS pixels the whole page scales up in steps,
   so type, spacing and images keep the same proportions instead of floating in a narrow column. */
@media (min-width: 1920px){html{zoom:1.25}}
@media (min-width: 2400px){html{zoom:1.5}}
@media (min-width: 2880px){html{zoom:1.75}}
@media (min-width: 3360px){html{zoom:2}}