/* Hoofar Andish — design tokens. Palette is fixed by the brief; do not add hues. */
:root {
  /* palette */
  --c-paper: #F4F2EE;
  --c-hero-paper: #EDE6DD;   /* sampled from the hero image's top edge */
  --c-orange: #E4572E;
  --c-orange-deep: #B8431F;
  --c-green: #2F4A4B;
  --c-graphite: #2E2A26;
  --c-amber: #E8A33D;
  --c-steel: #6B727A;

  /* derived neutrals (tints of palette colours only) */
  --c-ink: var(--c-graphite);
  --c-ink-soft: rgba(46, 42, 38, .74);     /* secondary text on paper, ~5:1 */
  --c-line: rgba(46, 42, 38, .16);
  --c-line-strong: rgba(46, 42, 38, .32);
  --c-paper-soft: rgba(244, 242, 238, .78); /* secondary text on dark fields */
  --c-paper-line: rgba(244, 242, 238, .22);

  /* photographic tints: edit these to retune the overlays */
  --tint-industry: var(--c-orange);
  --tint-material: var(--c-green);

  /* typography */
  --font: "Vazirmatn", Tahoma, sans-serif;
  --fs-hero: clamp(24px, 1.15rem + .8vw, 32px);
  --fs-h2: clamp(20px, 1.05rem + .4vw, 25px);
  --fs-h3: clamp(16px, .95rem + .15vw, 18px);
  --fs-body: clamp(14px, .85rem + .1vw, 15px);
  --fs-lead: clamp(14.5px, .88rem + .12vw, 16px);
  --fs-small: 12.5px;
  --fs-tiny: 11.5px;
  --lh-body: 1.95;
  --fw-head: 600;
  --lh-head: 1.6;

  /* spacing */
  --gutter: clamp(16px, 4vw, 56px);
  --wrap: 1240px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: clamp(40px, 5vw, 64px);
  --space-6: clamp(44px, 6.5vw, 92px);   /* section padding: ~44 mobile, ~92 desktop */

  /* shape */
  --r-tag: 2px;    /* tags and small labels */
  --r-sm: 3px;
  --r-md: 4px;     /* buttons, inputs, tabs */
  --r-lg: 4px;     /* panels */

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .18s;
  --t-med: .4s;
  --t-slow: .8s;

  /* layers */
  --z-object: 4;
  --z-cross: 6;
  --z-header: 50;

  --header-h: 72px;
}

@media (max-width: 767px) {
  :root {
    --header-h: 60px;
    /* phones: finer type and tighter sections */
    --fs-hero: 22px;
    --fs-h2: 20px;
    --fs-h3: 14.5px;
    --fs-body: 13px;
    --fs-lead: 13.5px;
    --fs-small: 11.5px;
    --fs-tiny: 11px;
    --lh-body: 1.85;
    --space-5: 36px;
    --space-6: 42px;
  }
}