/* RS Granules · homepage v2 (direction A, Moss & Monolith, refined)
 * Design Taste · genre: editorial (premium agri) · macrostructure: Photographic · theme: custom
 * vibe: moss on stone, bright alabaster, ShepherdUX dark brown, earth accents
 * display: Archivo (wdth 104-110) · body: Instrument Sans · urdu: Gulzar (Nastaliq)
 * nav: N5 floating island, hides on scroll down · footer: Ft1 mast-headed
 * Contrast measured 2026-09-26 (WCAG 2): ink/paper 17.1 · ink-2/paper 9.3 · ink-3/paper 5.5 ·
 * moss-deep/paper 7.6 · umber/paper 8.3 · ink/moss 8.9 · ink/moss-hi 11.3 · alabaster/brown 16.0
 */

:root {
  /* ground */
  --paper: #f8f7f2;
  --paper-2: #efece2;
  --paper-3: #e6e1d3;
  --lift: #fffefb;
  --line: #e2ddd0;
  --line-strong: #c9c1ad;

  /* ink: ShepherdUX dark brown */
  --ink: #17140f;
  --ink-2: #4a4232;
  --ink-3: #6d6450;

  /* moss */
  --moss: #97c33f;
  --moss-hi: #b1d954;
  --moss-deep: #385805;
  --moss-wash: #e8f2d4;
  --moss-wash-2: #dcebbf;

  /* earth */
  --umber: #624407;
  --clay: #ae5528;
  --wheat: #e3ad4b;
  --soil: #7a5236;

  /* monolith: dark brown sections */
  --brown: #17140f;
  --brown-2: #211c15;
  --brown-3: #2c251b;
  --brown-line: #3a3226;
  --alabaster: #f3efe4;
  --alabaster-2: #c9bfae;
  --moss-on-brown: #a2c847;

  --danger: #a62d1c;
  --focus: var(--ink);

  /* product family colours (pack drawings) */
  --fam-soil: #7a5236; --fam-soil-deep: #5a3b25;
  --fam-leaf: #3f6e2a; --fam-leaf-deep: #2b5020;
  --fam-slate: #4e6474; --fam-slate-deep: #364957;
  --fam-ochre: #b0802a; --fam-ochre-deep: #85601c;
  --fam-humus: #3e2f24; --fam-humus-deep: #2a1f18;
  --fam-verdigris: #3d6f69; --fam-verdigris-deep: #2a4f4b;
  --fam-rust: #9a4b2d; --fam-rust-deep: #733621;
  --fam-peat: #5c4430; --fam-peat-deep: #402f21;

  /* type */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-urdu: "Gulzar", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  --font-pack: "Archivo", system-ui, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-md: 1.1875rem;
  --text-lg: clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem);
  --text-xl: clamp(1.5rem, 1vw + 1.15rem, 2rem);
  --text-2xl: clamp(2.1rem, 2.6vw + 1rem, 3.5rem);
  --text-display: clamp(2.7rem, 4.6vw + 0.9rem, 5.4rem);

  /* spacing, 4pt */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem;
  --s-7: 1.75rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-14: 3.5rem; --s-16: 4rem;
  --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; --s-40: 10rem;
  --section: clamp(6rem, 11vw, 10.5rem);
  --gutter: clamp(1.25rem, 4.2vw, 4rem);
  --shell: 86rem;

  /* shape */
  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(23 20 15 / 0.06);
  --shadow-2: 0 18px 40px -24px rgb(23 20 15 / 0.35);
  --shadow-3: 0 40px 80px -40px rgb(23 20 15 / 0.45);

  /* 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);
  --ease-soft: cubic-bezier(0.25, 1, 0.5, 1);
  --d-1: 160ms; --d-2: 260ms; --d-3: 420ms; --d-4: 650ms; --d-5: 900ms; --d-6: 1200ms;

  /* layers */
  --z-raised: 10; --z-header: 200; --z-dropdown: 210; --z-overlay: 400;

  /* direction helpers (flipped for Urdu) */
  --flip: 1;
  --sweep-in: 0 50%;
  --sweep-out: 100% 50%;
}

[dir="rtl"] { --flip: -1; --sweep-in: 100% 50%; --sweep-out: 0 50%; }