/* ═══════════════════════════════════════════════════════════
   CENE COFFEE — Shared Design System
   Abu Dhabi membership café · bilingual EN/AR
═══════════════════════════════════════════════════════════ */


:root{
  /* brand palette (from brand guideline) */
  --sage:    #9CBFAA;
  --sage-lt: #BBD5C4;
  --sage-dk: #7BA38C;
  --navy:    #1B3A5C;
  --navy-lt: #2A4F7A;
  --sand:    #C9A87A;
  --sand-lt: #E0C79E;
  --blush:   #EADBCB;
  --blush-dk:#E0C8B4;
  --cream:   #F5EDE2;
  --dark:    #0D1E2E;
  --white:   #FDFAF5;
  --ink:     #1B2330;

  --text-dim: rgba(27,58,92,0.55);
  --line: rgba(27,58,92,0.14);

  /* type */
  --display: "Ara Etab Almonieee";
  --serif: "Ara Etab Almonieee";
  --sans: "Manrope", sans-serif;
  --ar: "Ara Etab Almonieee";

  --maxw: 1280px;
  --nav-h: 76px;
}

/* ---- utility type ---- */
a {
    color:var(--navy);
}
.eyebrow{
  font-family:var(--sans);
  font-size:11px; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--sage-dk);
}
.display{ font-family:var(--display); font-weight:400; line-height:1.04; letter-spacing:-.01em; }
.serif-it{ font-family:var(--serif); font-style:italic; font-weight:400; }

/* ═══════════ BUTTONS ═══════════ */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  padding:15px 30px; border-radius:34px; border:1px solid transparent;
  transition:transform .2s, background .2s, color .2s, border-color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-navy{ background:var(--navy); color:var(--sage); }
.btn-navy:hover{ background:var(--navy-lt); }
.btn-sand{ background:var(--sand); color:var(--navy); }
.btn-sand:hover{ background:var(--sand-lt); }
.btn-cream{ background:var(--white); color:var(--navy); }
.btn-ghost{ background:transparent; border-color:rgba(27,58,92,.32); color:var(--navy); }
.btn-ghost:hover{ border-color:var(--navy); background:var(--navy); color:var(--white); }
.btn-ghost-lt{ background:transparent; border-color:rgba(255,255,255,.4); color:var(--white); }
.btn-ghost-lt:hover{ background:var(--white); color:var(--navy); }
.btn-lg{ padding:17px 38px; font-size:13px; }
.btn-sm{ padding:11px 20px; font-size:11px; }

/* ═══════════ MARQUEE ═══════════ */
.marquee{ overflow:hidden; white-space:nowrap; }
.marquee-track{ display:inline-flex; align-items:center; gap:30px; animation:marq 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.marquee span{ font-family:var(--display); display:inline-flex; align-items:center; gap:30px; }

/* ═══════════ SHARED BITS ═══════════ */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 30px; }
.spark{ display:inline-block; color:var(--sand); }
.pill-tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  padding:7px 15px; border-radius:30px; background:rgba(156,191,170,.18); color:var(--sage-dk);
}
.dotpulse{ width:6px; height:6px; border-radius:50%; background:currentColor; animation:dp 2s ease-in-out infinite; }
@keyframes dp{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.7);} }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; } .reveal.d5{ transition-delay:.4s; }

/* toast */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(140%);
  background:var(--navy); color:var(--white); padding:14px 26px; border-radius:40px;
  font-size:13px; letter-spacing:.04em; z-index:400; box-shadow:0 12px 40px rgba(13,30,46,.3);
  display:flex; align-items:center; gap:10px; transition:transform .4s cubic-bezier(.7,0,.2,1);
}
.toast.show{ transform:translateX(-50%) translateY(0); }
.toast .spark{ color:var(--sage); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
}

@media(max-width:767px){
	.wrap {
		padding: 0 20px;
	}
}