/* ==========================================================================
   mtemps6 — DESIGN TOKENS   (هوية "CARTON": نقل عفش + ونش رفع)
   ورق كرافت · حبر كحلي · شريط لاصق أصفر · ملصقات شحن وأختام "قابل للكسر"
   --------------------------------------------------------------------------
   • اللوحة  → كتلة PALETTE فقط (كل الدرجات التانية color-mix).
   • الخط    → @import + --mtemps6-font.
   • الحركة  → كتلة MOTION.
   ممنوع أي hex / rgb خارج :root.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');

:root {
  /* ======================================================================
     PALETTE — كرافت + كحلي + شريط لاصق
     ====================================================================== */
  --mtemps6-bg: #F3EBDD;             /* ورق كرافت فاتح */
  --mtemps6-surface: #FFFFFF;
  --mtemps6-cardboard: #C9A27A;      /* كرتون: زخرفة وتعبئة بس (نص كحلي فوقه مسموح) */
  --mtemps6-deep: #14213D;           /* حبر كحلي */
  --mtemps6-text: #14213D;
  --mtemps6-muted: #585E6A;
  --mtemps6-primary: #1F4E8C;        /* أزرق: روابط/كلمات مميزة فوق الفاتح */
  --mtemps6-accent: #FFC93C;         /* شريط لاصق: تعبئة، أو نص فوق الكحلي بس */
  --mtemps6-line: #DFD3BE;
  --mtemps6-whatsapp: #0F7D44;

  --mtemps6-on-primary: #FFFFFF;
  --mtemps6-on-accent: #14213D;
  --mtemps6-on-deep: #F7F1E6;
  --mtemps6-on-whatsapp: #FFFFFF;

  /* ======================================================================
     DERIVED — كله محسوب من اللوحة
     ====================================================================== */
  --mtemps6-bg-2: color-mix(in srgb, var(--mtemps6-cardboard) 22%, var(--mtemps6-bg));      /* كرتون فاتح */
  --mtemps6-bg-3: color-mix(in srgb, var(--mtemps6-cardboard) 38%, var(--mtemps6-bg));
  --mtemps6-paper: color-mix(in srgb, var(--mtemps6-bg) 35%, var(--mtemps6-surface));       /* ورق ملصق */
  --mtemps6-cardboard-2: color-mix(in srgb, var(--mtemps6-deep) 18%, var(--mtemps6-cardboard));
  --mtemps6-cardboard-soft: color-mix(in srgb, var(--mtemps6-cardboard) 30%, var(--mtemps6-surface));
  --mtemps6-deep-2: color-mix(in srgb, var(--mtemps6-on-deep) 7%, var(--mtemps6-deep));
  --mtemps6-deep-3: color-mix(in srgb, var(--mtemps6-on-deep) 14%, var(--mtemps6-deep));
  --mtemps6-deep-line: color-mix(in srgb, var(--mtemps6-on-deep) 18%, var(--mtemps6-deep));
  --mtemps6-on-deep-muted: color-mix(in srgb, var(--mtemps6-on-deep) 74%, var(--mtemps6-deep));
  --mtemps6-primary-2: color-mix(in srgb, var(--mtemps6-deep) 30%, var(--mtemps6-primary));
  --mtemps6-primary-soft: color-mix(in srgb, var(--mtemps6-primary) 10%, var(--mtemps6-surface));
  --mtemps6-accent-2: color-mix(in srgb, var(--mtemps6-cardboard) 35%, var(--mtemps6-accent));
  --mtemps6-accent-soft: color-mix(in srgb, var(--mtemps6-accent) 28%, var(--mtemps6-surface));
  --mtemps6-tape: color-mix(in srgb, var(--mtemps6-accent) 88%, transparent);               /* الشريط شفاف شوية */
  --mtemps6-line-2: color-mix(in srgb, var(--mtemps6-text) 22%, var(--mtemps6-line));
  --mtemps6-whatsapp-2: color-mix(in srgb, var(--mtemps6-deep) 25%, var(--mtemps6-whatsapp));
  --mtemps6-scrim: color-mix(in srgb, var(--mtemps6-deep) 62%, transparent);
  --mtemps6-glass: color-mix(in srgb, var(--mtemps6-bg) 86%, transparent);
  --mtemps6-hatch: color-mix(in srgb, var(--mtemps6-text) 9%, transparent);
  --mtemps6-ink-soft: color-mix(in srgb, var(--mtemps6-deep) 12%, transparent);
  --mtemps6-stamp: color-mix(in srgb, var(--mtemps6-primary) 85%, transparent);
  /* تموّجات الكرتون المضلّع (flutes) */
  --mtemps6-flutes: repeating-linear-gradient(90deg, var(--mtemps6-cardboard-2) 0 2px, var(--mtemps6-cardboard) 2px 7px);
  /* حبيبات ورق الكرافت (SVG noise — من غير ألوان ثابتة) */
  --mtemps6-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ======================================================================
     SCOPED THEME (بيتغيّر حسب كلاس الثيم على السكشن)
     ====================================================================== */
  --mtemps6-s-bg: var(--mtemps6-bg);
  --mtemps6-s-surface: var(--mtemps6-surface);
  --mtemps6-s-text: var(--mtemps6-text);
  --mtemps6-s-muted: var(--mtemps6-muted);
  --mtemps6-s-line: var(--mtemps6-line);
  --mtemps6-s-line-2: var(--mtemps6-line-2);
  --mtemps6-s-link: var(--mtemps6-primary);
  --mtemps6-s-mark: var(--mtemps6-primary);
  --mtemps6-s-focus: var(--mtemps6-primary);

  /* ======================================================================
     TYPOGRAPHY
     ====================================================================== */
  --mtemps6-font: "El Messiri", "Segoe UI", Tahoma, system-ui, sans-serif;
  --mtemps6-fw-regular: 400;
  --mtemps6-fw-medium: 500;
  --mtemps6-fw-semibold: 600;
  --mtemps6-fw-bold: 700;
  --mtemps6-lh-body: 1.85;
  --mtemps6-lh-head: 1.3;
  --mtemps6-lh-display: 1.12;
  --mtemps6-tracking-label: 0.04em;

  --mtemps6-fs-2xs: 0.72rem;
  --mtemps6-fs-xs: 0.78rem;
  --mtemps6-fs-sm: 0.875rem;
  --mtemps6-fs-base: 1rem;
  --mtemps6-fs-md: 1.0625rem;
  --mtemps6-fs-lg: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --mtemps6-fs-xl: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --mtemps6-fs-2xl: clamp(1.45rem, 1.2rem + 1.1vw, 2.05rem);
  --mtemps6-fs-3xl: clamp(1.65rem, 1.3rem + 1.5vw, 2.4rem);
  --mtemps6-fs-display: clamp(1.85rem, 1.35rem + 2.2vw, 3rem);

  /* ======================================================================
     SPACING (أساس 8px)
     ====================================================================== */
  --mtemps6-sp-1: 0.25rem;
  --mtemps6-sp-2: 0.5rem;
  --mtemps6-sp-3: 0.75rem;
  --mtemps6-sp-4: 1rem;
  --mtemps6-sp-5: 1.5rem;
  --mtemps6-sp-6: 2rem;
  --mtemps6-sp-7: 3rem;
  --mtemps6-sp-8: 4.5rem;

  --mtemps6-container: 1200px;
  --mtemps6-container-narrow: 780px;
  --mtemps6-gutter: clamp(1rem, 4.5vw, 2.5rem);
  --mtemps6-section-y: clamp(4rem, 9vw, 7.5rem);
  --mtemps6-gap: clamp(1rem, 2.4vw, 1.75rem);
  --mtemps6-pad-card: clamp(1.25rem, 2.6vw, 2rem);
  --mtemps6-pad-control-y: 0.8rem;
  --mtemps6-pad-control-x: 1.5rem;
  --mtemps6-pad-nav-y: 0.5rem;
  --mtemps6-pad-nav-x: 0.85rem;
  --mtemps6-pad-chip-y: 0.4rem;
  --mtemps6-pad-chip-x: 1rem;
  --mtemps6-tap: 2.75rem;
  --mtemps6-hdr-h: 4.75rem;
  --mtemps6-hdr-h-sm: 4rem;
  --mtemps6-flt-space: 4.75rem;         /* مساحة أسفل الفوتر لأزرار floating */

  /* ======================================================================
     SHAPE — كرتون: زوايا شبه مدوّرة + ظل "مرفوع"
     ====================================================================== */
  --mtemps6-bw: 2px;
  --mtemps6-hair: 1px;
  --mtemps6-r-xs: 4px;
  --mtemps6-r-sm: 10px;
  --mtemps6-r-md: 16px;
  --mtemps6-r-lg: 26px;
  --mtemps6-r-pill: 999px;
  --mtemps6-tape-h: 1.6rem;             /* عرض شريط اللاصق */

  --mtemps6-shadow-box: 0 1px 0 var(--mtemps6-cardboard-2), 0 18px 40px -22px color-mix(in srgb, var(--mtemps6-deep) 45%, transparent);
  --mtemps6-shadow-lift: 0 30px 60px -28px color-mix(in srgb, var(--mtemps6-deep) 55%, transparent);
  --mtemps6-shadow-float: 0 40px 50px -30px color-mix(in srgb, var(--mtemps6-deep) 50%, transparent);
  --mtemps6-ring: 0 0 0 3px color-mix(in srgb, var(--mtemps6-s-focus) 30%, transparent);

  /* ======================================================================
     MOTION — مرنة ومرحة (زي كرتونة بتتنطّط)
     ====================================================================== */
  --mtemps6-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mtemps6-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mtemps6-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --mtemps6-ease-soft: cubic-bezier(0.37, 0, 0.63, 1);

  --mtemps6-dur-1: 150ms;
  --mtemps6-dur-2: 300ms;
  --mtemps6-dur-3: 550ms;
  --mtemps6-dur-4: 900ms;
  --mtemps6-dur-5: 1500ms;

  --mtemps6-reveal-y: 34px;
  --mtemps6-reveal-x: 40px;
  --mtemps6-reveal-scale: 0.9;
  --mtemps6-reveal-rot: -4deg;          /* الكروت بتقع كأنها اتحطّت على الأرض */
  --mtemps6-stagger: 90ms;
  --mtemps6-word-stagger: 70ms;
  --mtemps6-float-dur: 6s;              /* طفو الصور الـ 3D */
  --mtemps6-float-y: 14px;
  --mtemps6-road-dur: 1.2s;             /* حركة خطوط الطريق */
  --mtemps6-swing-dur: 3.6s;            /* مرجحة كروت الآراء */
  --mtemps6-lift-dur: 7s;               /* دورة الونش في الهيرو */

  /* ======================================================================
     Z-INDEX
     ====================================================================== */
  --mtemps6-z-under: -1;
  --mtemps6-z-raised: 5;
  --mtemps6-z-float: 900;
  --mtemps6-z-header: 1000;
  --mtemps6-z-progress: 1010;
  --mtemps6-z-menu: 1100;
  --mtemps6-z-modal: 2000;
  --mtemps6-z-toast: 2100;

  --mtemps6-dir: -1;                    /* RTL = -1 · LTR = 1 (لعكس الحركات الاتجاهية) */
}

html[dir="ltr"] { --mtemps6-dir: 1; }

@media (min-width: 768px) { :root { --mtemps6-flt-space: 8.25rem; } }

@media (prefers-reduced-motion: reduce) {
  :root {
    --mtemps6-dur-1: 1ms;
    --mtemps6-dur-2: 1ms;
    --mtemps6-dur-3: 1ms;
    --mtemps6-dur-4: 1ms;
    --mtemps6-dur-5: 1ms;
    --mtemps6-reveal-y: 0px;
    --mtemps6-reveal-x: 0px;
    --mtemps6-reveal-scale: 1;
    --mtemps6-reveal-rot: 0deg;
    --mtemps6-stagger: 0ms;
    --mtemps6-word-stagger: 0ms;
    --mtemps6-float-y: 0px;
  }
}