/* Design tokens — change colours, fonts and spacing here. */
:root {
  /* Colour */
  --green-950: #0f2016;
  --green-900: #14291d;
  --green-800: #1f3d2b;
  --green-700: #2e5a3a;
  --green-600: #3b704a;
  --green-100: #e4ede5;

  --gold: #c9a227;
  --gold-light: #e3c766;
  --gold-soft: #f3e7bf;

  --cream: #f6f1e6;
  --cream-2: #efe6d3;
  --paper: #fbf8f2;
  --white: #ffffff;

  --charcoal: #1e1e1c;
  --ink: #2a2925;
  --muted: #6b665c;
  --line: #e4dccb;
  --tan: #b89b72;
  --tan-text: #7d6236;
  --whatsapp: #1fae55;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lede: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  --fs-h3: clamp(1.2rem, 0.6vw + 1rem, 1.45rem);
  --fs-h2: clamp(1.9rem, 2.4vw + 1rem, 3.1rem);
  --fs-h1: clamp(2.5rem, 5.2vw + 1rem, 5rem);

  /* Shape & depth */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(20 41 29 / 0.06), 0 4px 12px rgb(20 41 29 / 0.06);
  --shadow: 0 18px 40px -18px rgb(20 41 29 / 0.28);
  --shadow-lg: 0 40px 80px -30px rgb(15 32 22 / 0.45);

  /* Layout */
  --header-h: 76px;
  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);

  /* Ajrak-inspired block-print tile (Sindhi textile motif) used for accent bands */
  --ajrak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%236e1b26'/%3E%3Cg fill='%23c9a227'%3E%3Crect x='15' y='15' width='18' height='18'/%3E%3Crect x='15' y='15' width='18' height='18' transform='rotate(45 24 24)'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='5.5' fill='%231c2747'/%3E%3Ccircle cx='24' cy='24' r='2' fill='%23f6f1e6'/%3E%3Cg fill='%23f6f1e6'%3E%3Ccircle cx='0' cy='0' r='3.5'/%3E%3Ccircle cx='48' cy='0' r='3.5'/%3E%3Ccircle cx='0' cy='48' r='3.5'/%3E%3Ccircle cx='48' cy='48' r='3.5'/%3E%3C/g%3E%3Cpath d='M0 24h5M43 24h5M24 0v5M24 43v5' stroke='%23c9a227' stroke-width='2.5'/%3E%3C/svg%3E");
  --ajrak-size: 24px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.7s;
}