/* Design tokens: fonts, colours, category tones, spacing. */

@font-face { font-family: "Marhey"; src: url("../fonts/marhey-ar-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Marhey"; src: url("../fonts/marhey-ar-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Marhey"; src: url("../fonts/marhey-la-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Marhey"; src: url("../fonts/marhey-la-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Noto Sans Arabic"; src: url("../fonts/noto-ar-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Noto Sans Arabic"; src: url("../fonts/noto-ar-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Noto Sans Arabic"; src: url("../fonts/noto-ar-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Noto Sans Arabic"; src: url("../fonts/noto-la-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Noto Sans Arabic"; src: url("../fonts/noto-la-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Noto Sans Arabic"; src: url("../fonts/noto-la-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

:root {
  /* Brand colours */
  --green: #397547;
  --deep: #285936;
  --forest: #1f4529;
  --red: #d84132;
  --yellow: #f3d778;
  --cream: #fff6e5;
  --paper: #fffbf3;
  --ink: #50382a;
  --ink-soft: #7a6152;
  --line: rgba(80, 56, 42, .16);

  /* Type */
  --font-display: "Marhey", "Noto Sans Arabic", system-ui, sans-serif;
  --font-body: "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --size-display: clamp(2.9rem, 7.4vw, 6.6rem);
  --size-h1: clamp(2.3rem, 5.2vw, 4.6rem);
  --size-h2: clamp(1.9rem, 3.6vw, 3.25rem);
  --size-h3: clamp(1.25rem, 1.8vw, 1.6rem);
  --size-lead: clamp(1.08rem, 1.5vw, 1.3rem);

  /* Space */
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(72px, 10vw, 150px);
  --radius: 28px;
  --radius-lg: 44px;
  --max: 1320px;

  /* Default tone */
  --tone-bg: var(--cream);
  --tone-ink: var(--ink);
  --tone-accent: var(--green);
  --tone-soft: rgba(255, 255, 255, .55);
}

/* Category tones: set variables only; components decide where to paint them. */
.tone-sun     { --tone-bg: var(--yellow); --tone-ink: var(--deep);  --tone-accent: var(--red);    --tone-soft: rgba(255, 255, 255, .45); }
.tone-chili   { --tone-bg: var(--red);    --tone-ink: var(--cream); --tone-accent: var(--yellow); --tone-soft: rgba(255, 246, 229, .16); }
.tone-bean    { --tone-bg: var(--ink);    --tone-ink: var(--cream); --tone-accent: var(--yellow); --tone-soft: rgba(255, 246, 229, .1); }
.tone-wheat   { --tone-bg: #f4e4bf;       --tone-ink: var(--ink);   --tone-accent: var(--green);  --tone-soft: rgba(255, 255, 255, .5); }
.tone-leaf    { --tone-bg: var(--deep);   --tone-ink: var(--cream); --tone-accent: var(--yellow); --tone-soft: rgba(255, 246, 229, .1); }
.tone-saffron { --tone-bg: #eaa046;       --tone-ink: var(--ink);   --tone-accent: var(--deep);   --tone-soft: rgba(255, 255, 255, .35); }
.tone-berry   { --tone-bg: #f3bba2;       --tone-ink: var(--ink);   --tone-accent: var(--red);    --tone-soft: rgba(255, 255, 255, .4); }
.tone-cream   { --tone-bg: var(--cream);  --tone-ink: var(--ink);   --tone-accent: var(--green);  --tone-soft: #fff; }