/* ============================================================
   RONZA CLINIC — Design Tokens
   Luxury Arabic Medical Experience · v1.0
   كل قيم الهوية في مكان واحد — تغيير أي Token هنا
   ينعكس على الموقع بالكامل.
   ============================================================ */

/* Bold Social-Media Arabic Fonts (Cairo Black + Tajawal ExtraBold) */
/* Cairo/Tajawal/Reem Kufi تُحمّل عبر <link> في رأس الصفحة */
/* Google Material Symbols — أيقونات جوجل الرسمية */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300..700,0..1,0&display=swap');

/* ---------- Google Icons helper ---------- */
.msr {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.msr--outline { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

:root {
  /* ---------- Color / Brand ---------- */
  --ronza-primary: #C9857D;        /* Rose Dust — CTA والحركة */
  --ronza-deep: #A85F59;           /* Deep Rose — Hover والتأكيد */
  --ronza-blush: #F4DDD9;          /* Soft Blush — خلفيات ناعمة */
  --ronza-blush-soft: #F9EEEB;     /* Blush أفتح للـ Hover */
  --ronza-rose-glow: rgba(201, 133, 125, .16);

  /* ---------- Color / Surface ---------- */
  --ronza-cream: #FFF9F6;          /* الخلفية الأساسية */
  --ronza-white: #FFFFFF;

  /* ---------- Color / Text ---------- */
  --ronza-text: #392A28;
  --ronza-muted: #806D69;

  /* ---------- Color / Border ---------- */
  --ronza-border: #EBD7D2;
  --ronza-border-strong: #DFC4BD;

  /* ---------- Color / Feedback ---------- */
  --ronza-success: #5E8C61;
  --ronza-error: #B4533E;

  /* ---------- Typography / Family ---------- */
  --font-arabic: "Cairo", "Tajawal", "IBM Plex Sans Arabic", "Noto Kufi Arabic", system-ui, sans-serif;
  --font-display: "Cairo", "Tajawal", "Noto Kufi Arabic", system-ui, sans-serif;
  --font-serif-en: "Cormorant Garamond", Georgia, serif;

  /* ---------- Typography / Scale ---------- */
  --fs-display: clamp(2.6rem, 5vw, 4.5rem);      /* 72px desktop */
  --fs-h1: clamp(2rem, 3.6vw, 3rem);
  --fs-h2: clamp(1.6rem, 2.6vw, 2.25rem);
  --fs-h3: clamp(1.15rem, 1.6vw, 1.35rem);
  --fs-body: clamp(0.95rem, 1.05vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  /* ---------- Typography / Weight (Social-Media Bold) ---------- */
  --fw-heading: 900;
  --fw-subheading: 800;
  --fw-body: 700;
  --fw-medium: 700;

  /* ---------- Spacing ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --section-y: clamp(24px, 2.8vw, 44px);

  /* ---------- Grid ---------- */
  --container: 1320px;
  --container-pad: clamp(20px, 4.2vw, 60px);
  --grid-gap: 24px;
  --grid-gap-mobile: 16px;

  /* ---------- Radius ---------- */
  --radius-card: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-button: 999px;
  --radius-input: 12px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 2px 10px rgba(57, 42, 40, .05);
  --shadow-md: 0 10px 30px rgba(168, 95, 89, .10);
  --shadow-lg: 0 24px 60px rgba(168, 95, 89, .14);
  --shadow-cta: 0 10px 26px rgba(201, 133, 125, .38);

  /* ---------- Motion ---------- */
  --ease-lux: cubic-bezier(.22, .61, .21, 1);
  --dur-fast: .22s;
  --dur-med: .45s;
  --dur-slow: .8s;

  /* ---------- Layout ---------- */
  --header-h: 84px;
  --mobilebar-h: 64px;
}

/* ============================================================
   Dark-on-cream section variant (اختياري لأقسام معينة)
   ============================================================ */
[data-theme="deep"] {
  --surface: #4A3431;
  --surface-text: #FFF9F6;
}