@import url("https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Cormorant+Garamond:ital,wght@0,500;1,500&family=IBM+Plex+Sans+Arabic:wght@400;600&family=Jost:wght@400;500&display=swap");

/* Noor & Ink — shared component styles. Every value comes from tokens.css. */
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); }
[dir="rtl"], [lang="ar"] { font-family: var(--font-arabic-body); }
.ni-root { padding: var(--space-3); box-sizing: border-box; }
.ni-root *, .ni-root *::before, .ni-root *::after { box-sizing: border-box; }

/* Eyebrow + ornament divider */
.ni-eyebrow { font: 500 12px/16px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
[dir="rtl"] .ni-eyebrow { letter-spacing: 0; text-transform: none; font: 600 14px/22px var(--font-arabic-body); }
.ni-ornament { display: flex; align-items: center; gap: var(--space-2); color: var(--gold); }
.ni-ornament::before, .ni-ornament::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* Buttons */
.ni-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-pill); font: 500 15px/1 var(--font-body); letter-spacing: .04em; cursor: pointer; border: 1.5px solid var(--plum); text-decoration: none; }
[dir="rtl"] .ni-btn { font-family: var(--font-arabic-body); letter-spacing: 0; font-size: 16px; }
.ni-btn--primary { background: var(--plum); color: var(--on-plum); }
.ni-btn--ghost { background: transparent; color: var(--plum); }
.ni-btn--quiet { border-color: transparent; background: transparent; color: var(--olive); padding: 0; text-decoration: underline; text-underline-offset: 4px; }
.ni-btn:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 3px; }
.ni-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Arch frame (video + photos) */
.ni-arch { position: relative; overflow: hidden; border-radius: var(--radius-arch) var(--radius-arch) var(--radius-md) var(--radius-md); background: var(--plum-deep); }
.ni-arch::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--gold); border-radius: inherit; pointer-events: none; opacity: .8; }

/* Video hero */
.ni-hero { position: relative; aspect-ratio: 9 / 16; max-width: 420px; margin: 0 auto; color: #fffaf2; }
.ni-hero video, .ni-hero .ni-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ni-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--scrim) 0%, rgba(0,0,0,0) 55%); }
.ni-hero__text { position: absolute; inset-inline: var(--space-4); bottom: var(--space-5); text-align: center; }
.ni-hero__names { font: italic 500 44px/1 var(--font-display); margin: var(--space-2) 0; }
.ni-hero__names-ar { font: 400 40px/1.3 var(--font-arabic-display); margin: 0; }
.ni-hero__date { font: 500 13px/20px var(--font-body); letter-spacing: .2em; text-transform: uppercase; }
.ni-hero__sound { position: absolute; top: var(--space-6); inset-inline-end: var(--space-4); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,250,242,.6); background: rgba(27,12,22,.45); color: #fffaf2; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.ni-hero__sound:focus-visible { outline: 3px solid #fffaf2; outline-offset: 2px; }

/* Wax seal */
.ni-seal { width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--plum) 0%, var(--plum-deep) 75%); box-shadow: var(--shadow-seal); display: grid; place-items: center; color: var(--gold); font: italic 500 30px/1 var(--font-display); border: 3px solid var(--plum-deep); cursor: pointer; }
[data-theme="dark"] .ni-seal { background: radial-gradient(circle at 35% 30%, #6e3559 0%, #3b1830 75%); color: #d9b56a; }

/* Cards */
.ni-card { background: var(--paper-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-4); }
.ni-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--blush); color: var(--ink); font: 500 12px/16px var(--font-body); }
[dir="rtl"] .ni-chip { font: 600 13px/18px var(--font-arabic-body); }

/* Forms */
.ni-field { display: grid; gap: var(--space-2); }
.ni-label { font: 500 14px/20px var(--font-body); color: var(--ink); }
[dir="rtl"] .ni-label { font: 600 15px/24px var(--font-arabic-body); }
.ni-input { min-height: 48px; padding: 0 14px; border: 1.5px solid var(--field-border); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: 400 16px/1 inherit; font-family: inherit; }
.ni-input:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 1px; }
.ni-help { font: 400 13px/20px var(--font-body); color: var(--ink-muted); }
.ni-error { font: 500 13px/20px var(--font-body); color: var(--error); }

@media (prefers-reduced-motion: reduce) {
  .ni-root *, .ni-root *::before, .ni-root *::after { animation: none !important; transition: none !important; }
}