/* WCRC 2027 · Petra, cinematic. Shared tokens + components for the public
   pages (index.html, join.html). Near-black film base, real Petra photography,
   sand/gold highlights, condensed display type. Admin tools keep their own
   navy library. */
:root{
  --ink:#07060A; --ink2:#0E0C11; --ink3:#16131A;
  --sand:#F2E6D3; --sand-dim:#CDBFAA; --mute:#9A8B78; --mute2:#6E6257;
  --gold:#E2A85E; --gold-light:#F0C987; --gold-deep:#B8823C;
  --rose:#C4694F; --rose-deep:#8E3B2E; --rose-light:#D98A5A;
  --line:rgba(242,230,211,.14); --line-strong:rgba(242,230,211,.32);
  --ok:#8FCF9A; --err:#FF8A7A;
  --disp:'Oswald','Noto Kufi Arabic',system-ui,sans-serif;
  --disp-ar:'Noto Kufi Arabic','Oswald',sans-serif;
  --body:'IBM Plex Sans Arabic',system-ui,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* legacy aliases used by join.html */
  --night:var(--ink); --night2:var(--ink); --rock:var(--ink2); --rock2:var(--ink3); --rock3:#1E1A22;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ background:var(--ink); scroll-behavior:smooth; }
body{ background:var(--ink); color:var(--sand); font-family:var(--body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:var(--gold-light); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }
.disp, h1, h2, h3{ font-family:var(--disp); font-weight:600; letter-spacing:.01em; text-transform:uppercase; }
html[dir="rtl"] .disp, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3{ font-family:var(--disp-ar); letter-spacing:0; text-transform:none; }
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); }
html[dir="rtl"] .eyebrow{ letter-spacing:1px; font-family:var(--body); font-size:12px; }
.muted{ color:var(--mute); }
.grain{ display:none; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:15px 26px; border-radius:6px; font-family:var(--disp); font-weight:600; font-size:15px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; text-decoration:none; border:1px solid transparent; transition:transform .15s, filter .15s, background .15s; white-space:nowrap; }
html[dir="rtl"] .btn{ font-family:var(--body); letter-spacing:0; text-transform:none; font-weight:700; }
.btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.btn:active{ transform:translateY(0); }
.btn-gold{ background:var(--gold); color:#1F1408; }
.btn-rose{ background:var(--rose); color:#FFF6EA; }
.btn-ghost{ background:rgba(7,6,10,.45); border-color:var(--line-strong); color:var(--sand); backdrop-filter:blur(8px); }
.btn:disabled{ opacity:.55; cursor:default; transform:none; }

/* card */
.stone{ background:var(--ink2); border:1px solid var(--line); border-radius:12px; position:relative; }
.stone::before{ content:none; }

/* form controls */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; color:var(--sand-dim); margin-bottom:7px; font-weight:600; }
.field .hint{ font-size:12px; color:var(--mute); margin-top:6px; line-height:1.6; }
.input, .select, .textarea{ width:100%; background:#0B0A0E; border:1px solid var(--line); border-radius:8px; color:var(--sand); padding:13px 15px; font:inherit; font-size:15px; transition:border-color .15s, box-shadow .15s; }
.textarea{ min-height:120px; resize:vertical; line-height:1.6; }
.input:focus, .select:focus, .textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(226,168,94,.18); }
.input::placeholder, .textarea::placeholder{ color:#6A5F55; }
.chips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.chip{ position:relative; display:flex; gap:10px; align-items:flex-start; padding:13px 14px; border:1px solid var(--line); border-radius:10px; background:#0B0A0E; cursor:pointer; transition:border-color .15s, background .15s; }
.chip input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.chip .box{ width:20px; height:20px; border-radius:5px; border:1.5px solid var(--line-strong); flex:none; margin-top:2px; display:grid; place-items:center; color:#1F1408; font-size:13px; font-weight:900; }
.chip:has(input:checked){ border-color:var(--gold); background:rgba(226,168,94,.10); }
.chip:has(input:checked) .box{ background:var(--gold); border-color:var(--gold); }
.chip:has(input:checked) .box::after{ content:"✓"; }
.chip:has(input:focus-visible){ outline:2px solid var(--gold); outline-offset:2px; }
.chip b{ display:block; font-size:14px; color:var(--sand); }
.chip small{ display:block; font-size:12px; color:var(--mute); margin-top:2px; line-height:1.5; }
.msg{ margin-top:16px; font-size:14px; line-height:1.7; display:none; padding:14px 16px; border-radius:8px; }
.msg.ok{ display:block; background:rgba(143,207,154,.10); border:1px solid rgba(143,207,154,.5); color:#DDF3E1; }
.msg.err{ display:block; background:rgba(255,138,122,.10); border:1px solid rgba(255,138,122,.5); color:#FFD9D3; }

/* language / nav pills */
.lang{ background:rgba(7,6,10,.5); border:1px solid var(--line-strong); color:var(--sand); padding:8px 15px; border-radius:999px; cursor:pointer; font:inherit; font-size:13px; text-decoration:none; white-space:nowrap; backdrop-filter:blur(8px); }
.lang:hover{ border-color:var(--gold); color:var(--gold-light); }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } html{ scroll-behavior:auto; } }