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

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

:root {
  /* ======================================================================
     PALETTE — ليل المدينة (كحلي) + ضوء الكشافات (كهرماني) + ورق بوستر عاجي
     ====================================================================== */
  --mtemps7-bg: #F3F0E9;             /* عاجي (ورق بوستر) */
  --mtemps7-surface: #FFFFFF;
  --mtemps7-cardboard: #D9D3C6;      /* رملي: تعبئة وخطوط بس */
  --mtemps7-deep: #0A1F33;           /* كحلي ليلي */
  --mtemps7-ink: #050E18;            /* أسود الشاشة (letterbox / فوتر) */
  --mtemps7-text: #0B1B2B;
  --mtemps7-muted: #575F68;
  --mtemps7-primary: #12497A;        /* أزرق: روابط/كلمات مميزة فوق الفاتح */
  --mtemps7-accent: #F2A900;         /* كهرماني: تعبئة، أو نص فوق الكحلي بس */
  --mtemps7-line: #E0DBD0;
  --mtemps7-whatsapp: #0F7D44;

  --mtemps7-on-primary: #FFFFFF;
  --mtemps7-on-accent: #0A1F33;
  --mtemps7-on-deep: #F2F5F8;
  --mtemps7-on-whatsapp: #FFFFFF;

  /* ======================================================================
     DERIVED — كله محسوب من اللوحة
     ====================================================================== */
  --mtemps7-bg-2: color-mix(in srgb, var(--mtemps7-cardboard) 30%, var(--mtemps7-bg));
  --mtemps7-bg-3: color-mix(in srgb, var(--mtemps7-cardboard) 55%, var(--mtemps7-bg));
  --mtemps7-paper: color-mix(in srgb, var(--mtemps7-bg) 45%, var(--mtemps7-surface));
  --mtemps7-cardboard-2: color-mix(in srgb, var(--mtemps7-deep) 18%, var(--mtemps7-cardboard));
  --mtemps7-cardboard-soft: color-mix(in srgb, var(--mtemps7-cardboard) 30%, var(--mtemps7-surface));
  --mtemps7-deep-2: color-mix(in srgb, var(--mtemps7-on-deep) 6%, var(--mtemps7-deep));
  --mtemps7-deep-3: color-mix(in srgb, var(--mtemps7-on-deep) 13%, var(--mtemps7-deep));
  --mtemps7-deep-line: color-mix(in srgb, var(--mtemps7-on-deep) 16%, var(--mtemps7-deep));
  --mtemps7-on-deep-muted: color-mix(in srgb, var(--mtemps7-on-deep) 72%, var(--mtemps7-deep));
  --mtemps7-ink-2: color-mix(in srgb, var(--mtemps7-deep) 45%, var(--mtemps7-ink));
  --mtemps7-primary-2: color-mix(in srgb, var(--mtemps7-deep) 30%, var(--mtemps7-primary));
  --mtemps7-primary-soft: color-mix(in srgb, var(--mtemps7-primary) 9%, var(--mtemps7-surface));
  --mtemps7-accent-2: color-mix(in srgb, var(--mtemps7-on-deep) 25%, var(--mtemps7-accent));
  --mtemps7-accent-soft: color-mix(in srgb, var(--mtemps7-accent) 22%, var(--mtemps7-surface));
  --mtemps7-accent-glow: color-mix(in srgb, var(--mtemps7-accent) 35%, transparent);
  --mtemps7-tape: color-mix(in srgb, var(--mtemps7-accent) 35%, transparent);
  --mtemps7-line-2: color-mix(in srgb, var(--mtemps7-text) 20%, var(--mtemps7-line));
  --mtemps7-whatsapp-2: color-mix(in srgb, var(--mtemps7-deep) 25%, var(--mtemps7-whatsapp));
  --mtemps7-scrim: color-mix(in srgb, var(--mtemps7-ink) 70%, transparent);
  --mtemps7-glass: color-mix(in srgb, var(--mtemps7-on-deep) 9%, transparent);
  --mtemps7-glass-line: color-mix(in srgb, var(--mtemps7-on-deep) 22%, transparent);
  --mtemps7-hatch: color-mix(in srgb, var(--mtemps7-text) 8%, transparent);
  --mtemps7-ink-soft: color-mix(in srgb, var(--mtemps7-deep) 14%, transparent);
  --mtemps7-stamp: color-mix(in srgb, var(--mtemps7-primary) 85%, transparent);
  /* حبيبات فيلم خفيفة (SVG noise — من غير ألوان ثابتة) فوق السكاشن الغامقة */
  --mtemps7-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 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --mtemps7-flutes: none;

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

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

  --mtemps7-fs-2xs: 0.75rem;
  --mtemps7-fs-xs: 0.8125rem;
  --mtemps7-fs-sm: 0.9375rem;
  --mtemps7-fs-base: 1.0625rem;
  --mtemps7-fs-md: 1.125rem;
  --mtemps7-fs-lg: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --mtemps7-fs-xl: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
  --mtemps7-fs-2xl: clamp(1.7rem, 1.3rem + 1.7vw, 2.6rem);
  --mtemps7-fs-3xl: clamp(2.05rem, 1.45rem + 2.7vw, 3.6rem);
  --mtemps7-fs-display: clamp(2.4rem, 1.5rem + 4vw, 4.9rem);
  --mtemps7-fs-giant: clamp(4.5rem, 2rem + 11vw, 11rem);

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

  --mtemps7-container: 1240px;
  --mtemps7-container-narrow: 780px;
  --mtemps7-gutter: clamp(1rem, 4.5vw, 2.5rem);
  --mtemps7-section-y: clamp(4.5rem, 10vw, 8.5rem);
  --mtemps7-gap: clamp(1rem, 2.4vw, 1.75rem);
  --mtemps7-pad-card: clamp(1.25rem, 2.6vw, 2rem);
  --mtemps7-pad-control-y: 0.8rem;
  --mtemps7-pad-control-x: 1.6rem;
  --mtemps7-pad-nav-y: 0.5rem;
  --mtemps7-pad-nav-x: 0.85rem;
  --mtemps7-pad-chip-y: 0.4rem;
  --mtemps7-pad-chip-x: 1rem;
  --mtemps7-tap: 2.75rem;
  --mtemps7-hdr-h: 5.25rem;
  --mtemps7-hdr-h-sm: 4rem;
  --mtemps7-flt-space: 4.75rem;         /* مساحة أسفل الفوتر لأزرار floating */
  --mtemps7-letterbox: clamp(0.6rem, 2vw, 1.4rem);   /* شرايط الشاشة العريضة فوق وتحت الكادر */

  /* ======================================================================
     SHAPE — حواف حادة تقريبًا (كادر فيلم) + خطوط شعرة
     ====================================================================== */
  --mtemps7-bw: 1.5px;
  --mtemps7-hair: 1px;
  --mtemps7-r-xs: 3px;
  --mtemps7-r-sm: 5px;
  --mtemps7-r-md: 8px;
  --mtemps7-r-lg: 14px;
  --mtemps7-r-pill: 999px;
  --mtemps7-tape-h: 1.6rem;
  --mtemps7-corner: 1.1rem;              /* طول زوايا الكادر */

  --mtemps7-shadow-box: 0 1px 0 var(--mtemps7-line), 0 24px 50px -32px color-mix(in srgb, var(--mtemps7-deep) 55%, transparent);
  --mtemps7-shadow-lift: 0 34px 70px -34px color-mix(in srgb, var(--mtemps7-ink) 70%, transparent);
  --mtemps7-shadow-float: 0 40px 50px -30px color-mix(in srgb, var(--mtemps7-deep) 50%, transparent);
  --mtemps7-ring: 0 0 0 3px color-mix(in srgb, var(--mtemps7-s-focus) 30%, transparent);

  /* ======================================================================
     MOTION — هادية وسينمائية (fade + slow push-in)
     ====================================================================== */
  --mtemps7-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mtemps7-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --mtemps7-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --mtemps7-ease-soft: cubic-bezier(0.37, 0, 0.63, 1);
  --mtemps7-ease-film: cubic-bezier(0.77, 0, 0.18, 1);

  --mtemps7-dur-1: 150ms;
  --mtemps7-dur-2: 300ms;
  --mtemps7-dur-3: 550ms;
  --mtemps7-dur-4: 1000ms;
  --mtemps7-dur-5: 1500ms;

  --mtemps7-reveal-y: 40px;
  --mtemps7-reveal-x: 48px;
  --mtemps7-reveal-scale: 1.08;         /* الصور بتدخل بـ zoom-out بسيط زي لقطة */
  --mtemps7-reveal-rot: 0deg;
  --mtemps7-stagger: 110ms;
  --mtemps7-word-stagger: 70ms;
  --mtemps7-float-dur: 7s;
  --mtemps7-float-y: 14px;
  --mtemps7-road-dur: 1.2s;
  --mtemps7-swing-dur: 3.6s;
  --mtemps7-lift-dur: 7s;
  --mtemps7-kenburns: 22s;

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

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

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

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

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