/* Olive Tree — design tokens for عيلتنا.
 * Paper: limestone · bark: olive wood · leaves: sage · memorials: terracotta.
 * axes: light / calligraphic-display / chromatic-olive ~126°
 */
:root {
  /* Paper and ink */
  --color-paper:        oklch(95.6% 0.014 88);
  --color-paper-raised: oklch(98.2% 0.008 90);
  --color-paper-2:      oklch(92.6% 0.018 86);
  --color-soil:         oklch(88.6% 0.026 78);
  --color-rule:         oklch(81% 0.02 82);
  --color-muted:        oklch(46% 0.024 72);
  --color-ink:          oklch(25% 0.022 62);

  /* The tree */
  --color-bark:         oklch(41% 0.035 58);
  --color-bark-light:   oklch(50% 0.036 64);
  --color-canopy:       oklch(92.8% 0.026 116);
  --color-leaf:         oklch(88% 0.048 122);
  --color-leaf-lit:     oklch(81% 0.08 124);
  --color-leaf-edge:    oklch(60% 0.07 126);
  --color-leaf-ink:     oklch(27% 0.04 128);
  --color-fruit:        oklch(31% 0.045 330);
  --color-fruit-shine:  oklch(64% 0.035 330);

  /* Signals */
  --color-accent:       oklch(47% 0.11 128);
  --color-focus:        oklch(47% 0.15 134);
  --color-memorial:     oklch(49% 0.11 38);
  --color-shadow:       oklch(25% 0.022 62 / 0.1);
  --color-backdrop:     oklch(25% 0.022 62 / 0.45);

  /* Type */
  --font-display: "Aref Ruqaa", "Amiri", "Traditional Arabic", serif;
  --font-body:    "IBM Plex Sans Arabic", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;

  --text-xs:      0.84rem;
  --text-sm:      0.92rem;
  --text-base:    1rem;
  --text-md:      1.2rem;
  --text-lg:      1.5rem;
  --text-xl:      1.9rem;
  --text-display: clamp(2.6rem, 2.4vw + 1.8rem, 3.8rem);

  /* Space — 4pt scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --gutter:    clamp(1rem, 4vw, 3rem);

  /* Shape */
  --radius-tablet: 6px;
  --radius-field:  6px;
  --radius-card:   10px;
  --rule:          1px solid var(--color-rule);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* Layers */
  --z-base:   1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-modal:  400;
}