/* ==========================================================================
   Sayoh Store · Design tokens
   Palette drawn from the Swahili coast: terracotta clay, ochre sun,
   indigo night, coral-stone sand and kente greens.
   ========================================================================== */

:root {
  /* Brand colours */
  --clay: #B4532A;
  --clay-700: #8E3B1B;
  --clay-100: #F3DCCD;
  --ochre: #D99A2B;
  --ochre-300: #EBC57A;
  --indigo: #1C2541;
  --indigo-900: #121830;
  --forest: #2F5D3A;
  --lagoon: #2B7A78;

  /* Neutrals */
  --ebony: #1A1411;
  --ink: #2A201B;
  --muted: #76665A;
  --line: #E5D8C5;
  --sand: #F4EADB;
  --sand-200: #EADBC4;
  --ivory: #FBF7F0;
  --white: #FFFFFF;

  /* Semantic */
  --bg: var(--ivory);
  --text: var(--ink);
  --accent: var(--clay);
  --success: #3E7B4F;

  /* Typography */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-2xl: clamp(1.8rem, 1.3rem + 1.8vw, 2.75rem);
  --fs-3xl: clamp(2.4rem, 1.6rem + 3.2vw, 4.25rem);
  --fs-hero: clamp(2.9rem, 1.8rem + 4.6vw, 6rem);

  /* Shape */
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 28px;
  --arch: 999px 999px 16px 16px; /* Swahili doorway arch */

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(42, 32, 27, 0.06), 0 2px 8px rgba(42, 32, 27, 0.05);
  --shadow: 0 10px 30px -12px rgba(42, 32, 27, 0.25);
  --shadow-lg: 0 30px 60px -20px rgba(26, 20, 17, 0.35);

  /* Layout */
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 128px);
  --header-h: 76px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.45s;

  /* Patterns */
  --pattern-mudcloth: url("../images/patterns/mudcloth.svg");
  --pattern-kente: url("../images/patterns/kente.svg");
}