/* ==========================================================================
   Hijab Haven — base.css
   Design tokens, reset, typography, utilities.
   ========================================================================== */

:root {
  /* Brand palette — warm cream, deep rose, gold accent */
  --clr-primary: #8a4a5e;
  --clr-primary-dark: #6d3548;
  --clr-primary-light: #a9687c;
  --clr-accent: #c9a24b;
  --clr-accent-dark: #ad8836;

  --clr-bg: #fdfaf7;
  --clr-surface: #ffffff;
  --clr-surface-alt: #f6efe9;
  --clr-ink: #2b2328;
  --clr-ink-soft: #4c4147;
  --clr-muted: #857780;
  --clr-line: #e8ddd6;

  --clr-success: #2e7d52;
  --clr-success-bg: #e7f4ec;
  --clr-warning: #b07d1a;
  --clr-warning-bg: #fbf1d9;
  --clr-danger: #b23a3a;
  --clr-danger-bg: #fbe7e7;
  --clr-info: #35648f;
  --clr-info-bg: #e6eef7;

  /* Type */
  --font-head: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Scale */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-full: 999px;

  /* Shadows */
  --sh-sm: 0 1px 3px rgba(43, 35, 40, 0.08);
  --sh-md: 0 6px 20px rgba(43, 35, 40, 0.09);
  --sh-lg: 0 16px 40px rgba(43, 35, 40, 0.14);

  /* Layout */
  --container: 1200px;
  --header-h: 116px;
  --transition: 180ms ease;

  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* --------------------------------- Reset -------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--clr-ink);
  background: var(--clr-bg);
  overflow-x: hidden;
  min-height: 100vh;
}

body.no-scroll {
  overflow: hidden;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--clr-primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--clr-primary-dark);
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--sp-3);
  color: var(--clr-ink);
}

h1 { font-size: clamp(2rem, 5vw, var(--fs-4xl)); }
h2 { font-size: clamp(1.6rem, 3.5vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--sp-3); }

ul, ol { margin: 0 0 var(--sp-3); padding-left: 1.1rem; }

:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ------------------------------ Container ------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.container--narrow { max-width: 760px; }
.container--wide { max-width: 1380px; }

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

.text-center { text-align: center; }
.text-muted { color: var(--clr-muted); }
.text-danger { color: var(--clr-danger); }
.text-success { color: var(--clr-success); }
.text-accent { color: var(--clr-accent-dark); }
.fw-600 { font-weight: 600; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }

.hidden { display: none !important; }

.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }

.section {
  padding-block: var(--sp-7);
}

.section--alt {
  background: var(--clr-surface);
}

.section__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--sp-6);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-accent-dark);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

.divider {
  height: 1px;
  background: var(--clr-line);
  border: 0;
  margin: var(--sp-5) 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.65em;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--clr-surface-alt);
  color: var(--clr-ink-soft);
}
.badge--success { background: var(--clr-success-bg); color: var(--clr-success); }
.badge--warning { background: var(--clr-warning-bg); color: var(--clr-warning); }
.badge--danger  { background: var(--clr-danger-bg); color: var(--clr-danger); }
.badge--info    { background: var(--clr-info-bg); color: var(--clr-info); }
.badge--gold    { background: var(--clr-accent); color: #fff; }

/* ---------------------------- Skeleton load ----------------------------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--clr-surface-alt);
  border-radius: var(--r-md);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: skeleton 1.3s infinite;
}
@keyframes skeleton {
  100% { transform: translateX(100%); }
}

/* Respect reduced motion */
@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;
  }
}