/*
 * Raseem Digital Brand Tokens
 * Extracted from the supplied Raseem palette and current website.
 * Load Playfair Display, Inter, and Noto Kufi Arabic before this file.
 */

:root {
  /* Official palette */
  --raseem-rose: #BE3455;
  --raseem-berry: #A3325C;
  --raseem-midnight-plum: #48253A;
  --raseem-dusty-mauve: #664954;
  --raseem-soft-cream: #FBEEE6;
  --raseem-slate-indigo: #3A405A;
  --raseem-white: #FFFFFF;
  --raseem-black: #000000;

  /* Semantic roles */
  --raseem-color-brand: var(--raseem-rose);
  --raseem-color-brand-hover: var(--raseem-berry);
  --raseem-color-ink: var(--raseem-midnight-plum);
  --raseem-color-surface: var(--raseem-white);
  --raseem-color-surface-warm: var(--raseem-soft-cream);
  --raseem-color-surface-dark: var(--raseem-midnight-plum);
  --raseem-color-surface-data: var(--raseem-slate-indigo);
  --raseem-color-on-brand: var(--raseem-white);
  --raseem-color-on-dark: var(--raseem-white);

  /* Typography */
  --raseem-font-display: "Playfair Display", Georgia, serif;
  --raseem-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --raseem-font-arabic: "Noto Kufi Arabic", Inter, sans-serif;

  /* Layout */
  --raseem-content-max: 80rem; /* 1280px */
  --raseem-gutter: clamp(1rem, 3vw, 2rem);
  --raseem-section-space: clamp(5rem, 10vw, 10rem);
  --raseem-section-space-sm: clamp(3.5rem, 7vw, 8rem);
  --raseem-radius-sm: 0.5rem;
  --raseem-radius: 0.65rem;
  --raseem-transition-fast: 180ms ease;
  --raseem-transition-base: 320ms ease;
  --raseem-transition-slow: 700ms ease;

  /* Image overlays */
  --raseem-overlay-image: linear-gradient(to top, rgb(0 0 0 / 82%), rgb(0 0 0 / 42%) 56%, rgb(0 0 0 / 8%));
  --raseem-gradient-deep: linear-gradient(135deg, var(--raseem-midnight-plum) 0%, var(--raseem-slate-indigo) 100%);
}

html[lang="ar"],
html[dir="rtl"],
html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: var(--raseem-font-arabic);
  direction: rtl;
}

.raseem-container {
  width: min(100% - (var(--raseem-gutter) * 2), var(--raseem-content-max));
  margin-inline: auto;
}

.raseem-display {
  margin: 0;
  color: inherit;
  font-family: var(--raseem-font-display);
  font-size: clamp(3rem, 8vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.98;
}

:lang(ar) .raseem-display,
[dir="rtl"] .raseem-display {
  font-family: var(--raseem-font-arabic);
  font-size: clamp(2.35rem, 6vw, 6rem);
  letter-spacing: 0;
  line-height: 1.28;
}

.raseem-section {
  padding-block: var(--raseem-section-space);
}

.raseem-impact-block {
  background: var(--raseem-color-brand);
  color: var(--raseem-color-on-brand);
  padding-block: var(--raseem-section-space);
}

.raseem-section-deep {
  background: var(--raseem-gradient-deep);
  color: var(--raseem-color-on-dark);
}

.raseem-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.875rem 1.5rem;
  border: 1px solid var(--raseem-color-brand);
  border-radius: 0;
  background: var(--raseem-color-brand);
  color: var(--raseem-color-on-brand);
  font-family: var(--raseem-font-body);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  transition: background-color var(--raseem-transition-base), border-color var(--raseem-transition-base), transform var(--raseem-transition-fast);
}

:lang(ar) .raseem-button-primary,
[dir="rtl"] .raseem-button-primary {
  font-family: var(--raseem-font-arabic);
}

.raseem-button-primary:hover {
  border-color: var(--raseem-color-brand-hover);
  background: var(--raseem-color-brand-hover);
}

.raseem-button-primary:focus-visible {
  outline: 3px solid var(--raseem-soft-cream);
  outline-offset: 3px;
}

.raseem-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.875rem 1.5rem;
  border: 1px solid var(--raseem-color-ink);
  border-radius: 0;
  background: transparent;
  color: var(--raseem-color-ink);
  font-family: var(--raseem-font-body);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  transition: background-color var(--raseem-transition-base), color var(--raseem-transition-base);
}

.raseem-button-secondary:hover {
  background: var(--raseem-color-ink);
  color: var(--raseem-white);
}

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