/* =============================================================================
   JoPlay Tournament module — shared design tokens        web/shared/tokens.css
   -----------------------------------------------------------------------------
   :root tokens ported VERBATIM from JoPlay Stage 2.4c app/styles.css (the
   PRIMARY product/UI reference). Do not re-tune values here — parity with the
   existing JoPlay product is the contract.

   FONTS — each app's index.html must load the JoPlay Google Fonts set BEFORE
   this stylesheet (same families/weights as the JoPlay app):

     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Poppins:wght@600;700&family=Inter:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">

   Load order in each app:
     tokens.css → components.css → (app-specific css)
     i18n.js → icons.js → ui.js → (app-specific js)
   ============================================================================= */
:root{
  /* ================= JoPlay Light Shell — design tokens =================
     ACCENT LAYER: --accent family (JoPlay red by default).
     NEUTRAL SHELL: --bg page background · --card surfaces · --line borders ·
       --ch navy/charcoal chrome · --text body text · --grey secondary text.
     SEMANTIC: --ok success · --warn warning · --danger destructive · --info.
     ====================================================================== */
  --red:#CE1126; --red-dark:#A80D1E; --red-tint:#FBE9EB; --red-soft:#F6CDD2;
  --accent:var(--red); --accent-dark:var(--red-dark); --accent-tint:var(--red-tint); --accent-soft:var(--red-soft);
  --ch:#2B3038; --ch-light:#3A414B; --ch-lighter:#4A525E;
  --bg:#F4F5F7; --card:#FFFFFF; --line:#E6E8EC;
  --grey:#8A919B; --grey-dark:#5F6772; --text:#23272E;
  --green:#1E9E5A; --amber:#D97706;
  --ok:var(--green); --warn:var(--amber); --danger:#B91C1C; --info:#2563EB;
  --radius:16px; --radius-sm:11px;
  --shadow:0 1px 2px rgba(35,39,46,.05), 0 3px 10px rgba(35,39,46,.06);
  --shadow-lg:0 8px 30px rgba(35,39,46,.16);
}

/* ============ base element styles (JoPlay) ============ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:"Cairo",-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.45}
button{font-family:inherit;border:none;cursor:pointer;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:10px 13px;width:100%;background:#fff;color:var(--text);outline:none;transition:border-color .15s}
input:focus,textarea:focus,select:focus{border-color:var(--ch)}
::placeholder{color:#B4BAC2}

/* app frame: phone-width app shell centred on a slightly darker page,
   exactly like the JoPlay product (`.wide` widens it, `.dshell` grids it) */
#app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative;overflow-x:hidden}
#app.wide{max-width:1160px}
body{background:#E9EBEE}
#app{background:var(--bg);box-shadow:0 0 40px rgba(35,39,46,.07)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}