/* ============================================================
   NILA AYDIN — DESIGN TOKENS
   The only place colours, type, spacing and radii are defined.
   ============================================================ */

:root {
  /* ---- Colour ---- */
  --forest:        #0A2F27;  /* Deep Forest Green — primary identity */
  --forest-near:   #071C18;  /* Near-Black Green — footer, deepest surface */
  --evergreen:     #17483D;  /* Evergreen — raised surface on green */
  --porcelain:     #F5F2EB;  /* Warm Porcelain — main page background */
  --white:         #FFFFFF;
  --sage:          #DDE8E2;  /* Mist Sage — quiet fills */
  --coral:         #FF6658;  /* Signal Coral — the single focal colour */
  --graphite:      #18221F;  /* Body text on light */
  /* Muted text. The brief's #68736D measures 4.41:1 on porcelain — just under AA.
     Darkened to #5D6862 (5.19:1) to pass. Visually the same grey-green. */
  --muted:         #5D6862;
  --muted-spec:    #68736D;  /* original value, kept for reference / non-text use */
  --border-light:  #D3DDD7;
  --border-dark:   rgba(255,255,255,0.12);
  --on-dark:       #EFF3F0;
  --on-dark-muted: rgba(239,243,240,0.70);

  /* Coral is a *surface* colour, never a text colour on light backgrounds
     (contrast of #FF6658 on #F5F2EB is ~2.5:1). Text on coral is forest. */
  --coral-ink:     var(--forest);

  /* ---- Type ---- */
  --font-latin: 'Manrope', 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-fa-body: 'Vazirmatn', 'Manrope', system-ui, sans-serif;
  --font-fa-head: 'Estedad', 'Vazirmatn', 'Manrope', system-ui, sans-serif;

  --font-body: var(--font-latin);
  --font-head: var(--font-latin);

  /* Fluid scale — clamp(min, preferred, max) */
  --t-hero:    clamp(2.5rem, 1.4rem + 3vw, 4rem);       /* 40 → 64px — sized so each hero statement keeps to one line per locale */
  --t-h2:      clamp(2rem, 1.35rem + 2.1vw, 3.25rem);   /* 32 → 52px */
  --t-h3:      clamp(1.55rem, 1.2rem + 1.3vw, 2.4rem);  /* 25 → 38px */
  --t-h4:      clamp(1.15rem, 1.02rem + 0.45vw, 1.5rem);
  --t-lead:    clamp(1.1rem, 1.02rem + 0.35vw, 1.32rem);
  --t-body:    clamp(1.0625rem, 1.02rem + 0.15vw, 1.1875rem); /* 17 → 19px */
  --t-small:   1rem;      /* never below 16px */
  --t-label:   0.9375rem; /* 15px — labels & nav only */

  --lh-tight: 1.06;
  --lh-head:  1.14;
  --lh-body:  1.62;

  /* ---- Spacing (8px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 40px; --s-8: 56px; --s-9: 72px; --s-10: 96px;
  --s-11: 128px; --s-12: 160px;

  --section-y: clamp(72px, 8vw, 128px);
  --gutter: clamp(20px, 4vw, 72px);
  --maxw: 1440px;
  --grid-gap: clamp(20px, 2vw, 32px);

  /* ---- Radii ---- */
  --r-btn: 11px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 22px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.31, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-field: 700ms;

  /* ---- Elevation (restrained) ---- */
  --shadow-1: 0 1px 2px rgba(10,47,39,0.05);
  --shadow-2: 0 12px 32px -18px rgba(10,47,39,0.35);
}

/* Persian typography */
[lang='fa'] {
  --font-body: var(--font-fa-body);
  --font-head: var(--font-fa-head);
  --lh-body: 1.85;
  --lh-head: 1.42;
  --lh-tight: 1.32;
}