/* =========================================================
   rkia-couture — DESIGN TOKENS
   Maison Rkia Aït Blal — single source of truth.
   Change a value here and the whole theme follows.
   ========================================================= */
:root{

  /* ---- COLOR — Maison palette ---- */
  --noir:#1A1814;          /* primary ink / dark sections */
  --noir-deep:#13110E;     /* footer, deepest black */
  --ink:#2A2722;           /* secondary dark */
  --creme:#FFFDF8;         /* lightest background */
  --ivory:#F9F5EE;         /* page background */
  --beige:#F2EBD9;         /* alt band background */
  --sable:#E8DECA;         /* lines, soft borders */
  --or:#C8A96E;            /* champagne gold — signature */
  --or-deep:#A8893A;       /* deep gold — hover / accents */
  --or-pale:#E8D5A8;       /* pale gold — labels on dark */
  --gris:#7A7469;          /* muted body text */
  --gris-clair:#B8B0A4;    /* faint text */
  --whatsapp:#1E6B54;      /* WhatsApp CTA green (couture layer) */
  --whatsapp-deep:#185642;

  /* Functional aliases */
  --bg:var(--ivory);
  --text:var(--noir);
  --muted:var(--gris);
  --line:rgba(26,24,20,.12);
  --line-light:rgba(255,253,248,.18);

  /* ---- TYPOGRAPHY — official Maison system ---- */
  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif; /* headings */
  --font-serif:'EB Garamond', Georgia, serif;                           /* editorial body */
  --font-sans:'Tenor Sans', system-ui, -apple-system, sans-serif;       /* UI, nav, eyebrows, buttons */

  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;

  /* Fluid type scale */
  --fs-hero:clamp(48px, 9vw, 132px);
  --fs-h1:clamp(40px, 6vw, 86px);
  --fs-h2:clamp(32px, 5vw, 64px);
  --fs-h3:clamp(22px, 3vw, 34px);
  --fs-body:clamp(15px, 1.1vw, 17px);
  --fs-small:13px;
  --fs-eyebrow:11px;

  --lh-tight:1.05;
  --lh-snug:1.2;
  --lh-body:1.85;

  /* Letter-spacing — couture restraint */
  --ls-eyebrow:.42em;
  --ls-nav:.28em;
  --ls-btn:.34em;
  --ls-display:.02em;

  /* ---- SPACING / LAYOUT ---- */
  --gutter:clamp(20px, 6vw, 120px);
  --section-y:clamp(80px, 12vh, 168px);
  --maxw:1480px;
  --maxw-text:680px;
  --header-h:84px;

  /* ---- MOTION ---- */
  --ease:cubic-bezier(.19, 1, .22, 1);
  --t-fast:.35s;
  --t-med:.6s;
  --t-slow:1.1s;

  /* ---- ELEVATION ---- */
  --shadow-soft:0 18px 60px -30px rgba(26,24,20,.45);
  --shadow-panel:-20px 0 60px -30px rgba(26,24,20,.5);

  /* ---- Z-INDEX SCALE ---- */
  --z-header:1000;
  --z-drawer:1100;
  --z-cart:1200;
  --z-overlay:1090;
}

/* Arabic / RTL: swap directional letter-spacing softening if needed.
   The base layout uses logical properties so RTL flows correctly. */
[dir="rtl"]{
  --ls-eyebrow:.18em;
  --ls-nav:.12em;
  --ls-btn:.16em;
}