/* Olepolos design tokens (from the design handoff README). */
:root {
  /* Colour */
  --maroon: #3F0D10;
  --maroon-soft: #52171B;
  --maroon-90: rgba(63, 13, 16, .90);
  --oxblood: #9D2124;
  --ember: #BB2028;
  --gold: #E0A53F;
  --gold-deep: #C68A2C;
  --gold-ink: #A06C1C;   /* gold for marks/text on bone: 3:1+ (non-text UI) on bone and bone-2 */
  --bone: #F4EFE6;
  --bone-2: #ECE5D8;
  --surface-card: #FBF8F2;
  --charcoal: #1A1413;
  --ink: #2A201F;
  --muted: #6B5E57; /* darkened from #7C6F68 for WCAG AA on bone and bone-2 */
  --hairline: rgba(26, 20, 19, .10);
  --hairline-dark: rgba(244, 239, 230, .16);
  --bone-86: rgba(244, 239, 230, .86);

  --cta-bg: var(--gold);
  --cta-fg: var(--maroon);
  --cta-hover: var(--gold-deep);

  /* Type */
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tracking-caps: .22em;
  --tracking-btn: .18em;

  /* Radii */
  --r-pill: 40px;
  --r-card: 14px;
  --r-panel: 22px;

  /* Shadows (warm, low) */
  --shadow-sm: 0 1px 2px rgba(63, 13, 16, .08), 0 1px 1px rgba(63, 13, 16, .04);
  --shadow-md: 0 6px 18px -6px rgba(63, 13, 16, .22), 0 2px 6px rgba(63, 13, 16, .08);
  --shadow-lg: 0 22px 48px -18px rgba(63, 13, 16, .38), 0 6px 14px rgba(63, 13, 16, .10);
  --shadow-ring: 3px 3px 0 rgba(157, 33, 36, .35);
  --shadow-ring-ember: 4px 4px 0 rgba(187, 32, 40, .55);
  --shadow-gold-glow: 0 8px 22px -8px rgba(224, 165, 63, .55);

  /* Wine-ring shape */
  --ring-radius: 47% 53% 50% 50% / 50% 47% 53% 50%;

  /* Shuka check: red-and-black Maasai cloth, used as low-opacity texture */
  --shuka-check:
    repeating-linear-gradient(90deg, rgba(26, 20, 19, .55) 0 6px, transparent 6px 22px, rgba(26, 20, 19, .35) 22px 26px, transparent 26px 44px),
    repeating-linear-gradient(0deg, rgba(26, 20, 19, .55) 0 6px, transparent 6px 22px, rgba(26, 20, 19, .35) 22px 26px, transparent 26px 44px),
    linear-gradient(var(--ember), var(--ember));

  /* Layout */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 75px;
  --band-pad: clamp(64px, 9vw, 96px);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 140ms;
  --t-med: 260ms;
  --t-slow: 420ms;
}