/* DT Events — brand tokens + shared components
   Fonts (load in each page <head>):
   <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
*/
:root{
  /* palette — pulled from DT's own setups */
  --ink:#2B1B4B;          /* deep plum — text, anchors */
  --ink-soft:#5B4B7A;
  --cream:#FFF8F0;        /* page background */
  --cream-2:#FFF1E6;
  --pink:#FF8FB1;
  --butter:#FFD66B;
  --sky:#8FD3FF;
  --mint:#8FE3C2;
  --lilac:#B79CFF;
  --coral:#FF6B5E;        /* primary action */
  --coral-dark:#E8503F;
  --white:#fff;
  --line:rgba(43,27,75,.12);

  --font-display:'Baloo Bhaijaan 2','Nunito',system-ui,sans-serif;
  --font-body:'Nunito','Tajawal',system-ui,sans-serif;

  --r-sm:14px; --r-md:22px; --r-lg:32px; --r-xl:44px;
  --shadow-sm:0 2px 10px rgba(43,27,75,.08);
  --shadow-md:0 10px 30px rgba(43,27,75,.14);
  --shadow-pop:0 6px 0 var(--coral-dark), 0 14px 24px rgba(255,107,94,.35);
  --rainbow:linear-gradient(90deg,var(--pink),var(--butter),var(--mint),var(--sky),var(--lilac));
  --ease-bounce:cubic-bezier(.2,1.5,.4,1);
}
html[lang="ar"]{ --font-body:'Tajawal','Nunito',system-ui,sans-serif; }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;margin:0;letter-spacing:-.01em}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{line-height:1.3;letter-spacing:0}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--lilac);outline-offset:3px;border-radius:8px}

/* arch frame — the brand shape. Use on a 3:4 box. */
.arch{aspect-ratio:3/4;overflow:hidden;border-radius:50% 50% var(--r-md) var(--r-md) / 37.5% 37.5% var(--r-md) var(--r-md);background:var(--cream-2)}
.arch>img{width:100%;height:100%;object-fit:cover}
.arch-ring{padding:5px;background:var(--rainbow);border-radius:50% 50% 26px 26px / 38.5% 38.5% 26px 26px}
.arch-ring>.arch{border-radius:50% 50% 22px 22px / 37.5% 37.5% 22px 22px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;border-radius:999px;padding:.85em 1.6em;font-family:var(--font-display);font-weight:700;font-size:1.05rem;text-decoration:none;background:var(--coral);color:#fff;box-shadow:var(--shadow-pop);transition:transform .15s var(--ease-bounce),box-shadow .15s;user-select:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--coral-dark),0 4px 8px rgba(255,107,94,.3)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--line),var(--shadow-sm);border:2px solid var(--ink)}
.btn-ghost:active{box-shadow:0 0 0 var(--line)}
.btn-dark{background:var(--ink);color:var(--cream);box-shadow:0 6px 0 #170c2e,0 14px 24px rgba(43,27,75,.3)}
.btn-sm{padding:.55em 1.1em;font-size:.95rem}
.chip{display:inline-flex;align-items:center;gap:.4em;border-radius:999px;padding:.4em .95em;background:#fff;border:2px solid var(--line);font-weight:700;font-size:.92rem;transition:all .15s}
.chip[aria-pressed="true"],.chip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* logo lockup: <a class="logo"><img src=…/mark.svg><span class="logo-text"><b data-i18n="brand.dt"></b><i data-i18n="brand.events"></i></span></a> */
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.logo img{height:2.6rem;width:auto}
.logo-text{display:flex;flex-direction:column;line-height:.95}
.logo-text b{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:.02em}
.logo-text i{font-style:normal;font-family:var(--font-display);font-weight:600;font-size:.72rem;letter-spacing:.32em;color:var(--coral)}
html[lang="ar"] .logo-text i{letter-spacing:.05em;font-size:.85rem;line-height:1.3}
/* Arabic letters hang below the baseline (ي ) — give the first line room so the second never overlaps it */
html[lang="ar"] .logo-text{line-height:1.2}
html[lang="ar"] .logo-text b{line-height:1.25;padding-bottom:.32em}

/* sparkle + confetti helpers */
.sparkle{display:inline-block;width:1em;height:1em;background:var(--butter);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(14deg)}}
.rainbow-bar{height:6px;background:var(--rainbow);border-radius:99px}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}