/*
Theme Name: MoroccoFeel
Theme URI: https://moroccofeel.com
Author: Mohamed El Bakkouri
Description: Custom theme for MoroccoFeel — a modern, calm, luxury Moroccan craft brand. "More than a place. A feeling."
Version: 0.1.0
Text Domain: moroccofeel
Requires PHP: 7.4
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  /* Brand palette */
  --color-ivory: #F1ECE1;
  --color-ivory-deep: #E8E0CF;
  --color-black: #14120F;
  --color-green: #1F3D2B;
  --color-green-deep: #142A1D;
  --color-gold: #A8823C;
  --color-terracotta: #B5613A;

  /* Semantic roles */
  --bg: var(--color-ivory);
  --bg-alt: var(--color-ivory-deep);
  --ink: var(--color-black);
  --ink-soft: #4A473F;
  --accent: var(--color-gold);
  --accent-deep: var(--color-green);
  --line: rgba(20, 18, 15, 0.14);

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;

  /* Scale (major third-ish, hand-tuned) */
  --step--1: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 1.6vw, 3rem);
  --step-4:  clamp(2.8rem, 2.1rem + 2.8vw, 4.5rem);

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.1; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}