/* الخيمة — Al-Kheima platform design tokens
   Package: KHAIMA-VISUAL-IDENTITY  ·  v1.0.0
   Machine-readable equivalent: tokens.json
   All colours, radii, shadows and fonts used in the platform UI come from here. */

/* Fonts are SELF-HOSTED — no external dependency, CSP-safe under style-src/font-src 'self'.
   Fetch the five .woff2 files once per fonts/README.md, then this resolves locally.
   Do NOT restore a fonts.googleapis.com import. */
@import url('fonts/fonts.css');

:root{
  /* --- primary --- */
  --kh-red:#6B1D1D;
  --kh-red-dark:#4A1212;
  --kh-red-light:#8B2626;

  /* --- secondary (sand) --- */
  --kh-sand:#EAD0AC;
  --kh-sand-light:#F7E7D0;
  --kh-sand-dark:#CBB08C;

  /* --- accent (gold) --- */
  --kh-gold:#D4AF37;
  --kh-gold-bright:#F5D061;
  --kh-gold-shadow:#997819;

  /* --- neutral --- */
  --kh-brown:#2C1A14;
  --kh-brown-deep:#1A0F0B;
  --kh-cream:#FFFDF7;
  --kh-sand-ground:#EFE3CE;

  /* --- support --- */
  --kh-teal:#2A9D8F;
  --kh-teal-bright:#3FBFAE;
  --kh-teal-deep:#1B6A61;

  /* --- background --- */
  --kh-bg:#FFFDF7;
  --kh-bg-dark:#1A0F0B;
  --kh-surface:#FFFFFF;
  --kh-surface-dark:rgba(255,253,247,0.07);

  /* --- text --- */
  --kh-text:#2C1A14;
  --kh-text-muted:#7A5C4E;
  --kh-text-on-dark:#F7E7D0;
  --kh-text-on-dark-muted:rgba(247,231,208,0.62);
  --kh-text-on-gold:#4A1212;
  --kh-link:#8B2626;
  --kh-link-on-dark:#F5D061;

  /* --- border --- */
  --kh-border:rgba(44,26,20,0.10);
  --kh-border-on-dark:rgba(247,231,208,0.16);
  --kh-border-gold:rgba(212,175,55,0.45);

  /* --- state --- */
  --kh-success:#2A9D8F;
  --kh-success-text:#7FD5CA;
  --kh-success-text-on-light:#1E7A6F;
  --kh-success-fill:rgba(42,157,143,0.16);
  --kh-warning:#D4AF37;
  --kh-warning-text:#F5D061;
  --kh-warning-text-on-light:#8A6A21;
  --kh-warning-fill:rgba(212,175,55,0.16);
  --kh-error:#B4432F;
  --kh-error-dark:#7E2A1C;
  --kh-error-text:#F0A08A;
  --kh-error-text-on-light:#8B2626;
  --kh-error-fill:rgba(180,67,47,0.16);
  --kh-disabled:#6E635B;
  --kh-disabled-dark:#4E463F;
  --kh-disabled-text:#B3A79C;
  --kh-disabled-opacity:0.45;

  /* --- gradients --- */
  --kh-grad-header:linear-gradient(180deg,#8B2626 0%,#4A1212 100%);
  --kh-grad-gold:linear-gradient(180deg,#F5D061 0%,#D4AF37 100%);
  --kh-grad-panel:linear-gradient(180deg,#2C1A14 0%,#1A0F0B 100%);
  --kh-grad-danger:linear-gradient(180deg,#B4432F 0%,#7E2A1C 100%);
  --kh-grad-success:linear-gradient(180deg,#3FBFAE 0%,#2A9D8F 100%);
  --kh-grad-disabled:linear-gradient(180deg,#6E635B 0%,#4E463F 100%);

  /* --- shadows --- */
  --kh-shadow-btn:0px 6px 0px #997819, 0px 10px 15px rgba(0,0,0,0.4);
  --kh-shadow-btn-pressed:0px 2px 0px #997819;
  --kh-shadow-sm:0 6px 14px rgba(44,26,20,0.08);
  --kh-shadow-md:0 8px 18px rgba(44,26,20,0.10);
  --kh-shadow-lg:0 18px 38px rgba(44,26,20,0.14);

  /* --- radius --- */
  --kh-radius-sm:16px;
  --kh-radius-md:20px;
  --kh-radius-lg:26px;
  --kh-radius-xl:34px;
  --kh-radius-pill:999px;

  /* --- spacing --- */
  --kh-space-1:4px;  --kh-space-2:8px;  --kh-space-3:12px; --kh-space-4:16px;
  --kh-space-5:20px; --kh-space-6:24px; --kh-space-7:32px; --kh-space-8:40px;
  --kh-space-9:48px; --kh-space-10:64px;

  /* --- type --- */
  --kh-font-display:'Readex Pro','Cairo',system-ui,sans-serif;
  --kh-font-body:'Tajawal',system-ui,sans-serif;
  --kh-font-num:'Rubik',system-ui,sans-serif;

  /* --- motion --- */
  --kh-motion-fast:160ms ease;
  --kh-motion-base:260ms ease;
  --kh-motion-slow:420ms ease;
}

/* ---------- dark surface override ---------- */
[data-theme="dark"]{
  --kh-bg:#1A0F0B;
  --kh-surface:rgba(255,253,247,0.07);
  --kh-text:#F7E7D0;
  --kh-text-muted:rgba(247,231,208,0.62);
  --kh-border:rgba(247,231,208,0.16);
  --kh-link:#F5D061;
}

/* ---------- game sub-brands: the ONLY game-specific tokens ---------- */
[data-game="anta-alzaniit"]{--kh-game-from:#A83232;--kh-game-to:#5E1414;--kh-game-accent:#C24A3C}
[data-game="almaarefa"]   {--kh-game-from:#2FA598;--kh-game-to:#12554E;--kh-game-accent:#3FBFAE}
[data-game]{--kh-game-grad:linear-gradient(180deg,var(--kh-game-from) 0%,var(--kh-game-to) 100%)}

/* ---------- base ---------- */
html[dir="rtl"] body,[dir="rtl"]{text-align:right}
body{
  margin:0;
  background:var(--kh-bg);
  color:var(--kh-text);
  font-family:var(--kh-font-body);
  font-weight:500;
  font-size:15px;
  line-height:1.65;
}
h1,h2,h3{font-family:var(--kh-font-display);font-weight:700;margin:0}
h1{font-size:24px;line-height:1.25}
h2{font-size:20px;line-height:1.3}
h3{font-size:17px;line-height:1.35}
a{color:var(--kh-link);text-decoration:none}
a:hover{color:var(--kh-red)}
:focus-visible{outline:2px solid var(--kh-gold);outline-offset:2px}
::selection{background:rgba(212,175,55,0.28)}

/* Latin / numeric strings inside RTL text — prevents bidi reordering of NNN×NNN, codes, scores */
.kh-ltr{direction:ltr;unicode-bidi:isolate;font-family:var(--kh-font-num)}

/* ---------- inlined-SVG type classes ----------
   Text-bearing SVGs in this package (wordmarks, lockups, game cards, splash, specimens)
   carry NO font declaration of their own — deliberately, so they add no external request.
   They tag their <text> with .h / .b / .n and inherit these rules from the host document.
   This ONLY applies when the SVG is inlined in the HTML. Via <img> or background-image the
   SVG is an isolated document, these rules do not reach it, and the Arabic falls back.
   See README.md § 9. */
svg .h{font-family:var(--kh-font-display);font-weight:700}
svg .b{font-family:var(--kh-font-body);font-weight:500}
svg .n{font-family:var(--kh-font-num);font-weight:700}
svg .t{font-family:var(--kh-font-num);font-weight:700}
svg .lbl{font-family:var(--kh-font-num);font-size:12px;fill:var(--kh-text-muted)}
svg .d{font-family:var(--kh-font-display)}

/* ---------- buttons ---------- */
.kh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;border:0;cursor:pointer;
  border-radius:var(--kh-radius-md);
  font-family:var(--kh-font-display);font-weight:700;font-size:15px;
  transition:transform var(--kh-motion-fast),box-shadow var(--kh-motion-fast);
}
.kh-btn--primary{background:var(--kh-grad-gold);color:var(--kh-text-on-gold);box-shadow:var(--kh-shadow-btn)}
.kh-btn--danger{background:var(--kh-grad-danger);color:var(--kh-cream);box-shadow:0px 6px 0px #571A11,0px 10px 15px rgba(0,0,0,0.4)}
.kh-btn--success{background:var(--kh-grad-success);color:var(--kh-cream);box-shadow:0px 6px 0px var(--kh-teal-deep),0px 10px 15px rgba(0,0,0,0.4)}
.kh-btn--ghost{background:rgba(255,253,247,0.10);color:var(--kh-text-on-dark);border:1px solid var(--kh-border-on-dark);box-shadow:none}
.kh-btn:active{transform:translateY(4px);box-shadow:var(--kh-shadow-btn-pressed)}
.kh-btn--danger:active{box-shadow:0px 2px 0px #571A11}
.kh-btn--success:active{box-shadow:0px 2px 0px var(--kh-teal-deep)}
.kh-btn:disabled,.kh-btn[aria-disabled="true"]{
  background:var(--kh-grad-disabled);color:var(--kh-disabled-text);
  box-shadow:0px 4px 0px #3A342F;opacity:var(--kh-disabled-opacity);
  transform:none;cursor:not-allowed;
}

/* ---------- cards, panels, inputs ---------- */
.kh-card{background:var(--kh-surface);border:1px solid var(--kh-border);border-radius:var(--kh-radius-lg);box-shadow:var(--kh-shadow-md);padding:16px}
.kh-panel{background:var(--kh-grad-panel);border:1px solid var(--kh-border-gold);border-radius:var(--kh-radius-xl);color:var(--kh-text-on-dark);padding:24px}
.kh-input{
  width:100%;min-height:48px;padding:0 16px;
  background:var(--kh-surface);color:var(--kh-text);
  border:1px solid var(--kh-border);border-radius:var(--kh-radius-pill);
  font-family:var(--kh-font-body);font-size:15px;
}
.kh-input::placeholder{color:var(--kh-text-muted)}
.kh-input:focus-visible{border-color:var(--kh-gold)}
.kh-input[aria-invalid="true"]{border-color:var(--kh-error);background:var(--kh-error-fill)}

/* ---------- chips / badges ---------- */
.kh-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--kh-radius-pill);font-family:var(--kh-font-num);font-size:11px;font-weight:700}
.kh-chip--gold{background:var(--kh-grad-gold);color:var(--kh-text-on-gold)}
.kh-chip--success{background:var(--kh-success-fill);color:var(--kh-success-text-on-light);border:1px solid rgba(42,157,143,0.45)}
.kh-chip--warning{background:var(--kh-warning-fill);color:var(--kh-warning-text-on-light);border:1px solid rgba(212,175,55,0.45)}
.kh-chip--error{background:var(--kh-error-fill);color:var(--kh-error-text-on-light);border:1px solid rgba(180,67,47,0.45)}

/* ---------- platform kicker above a game name ---------- */
.kh-kicker{display:inline-flex;align-items:center;gap:6px;font-family:var(--kh-font-display);font-weight:700;font-size:11px;letter-spacing:1px;color:var(--kh-gold-bright)}

/* ---------- navigation ---------- */
.kh-nav{display:flex;align-items:center;justify-content:space-around;min-height:78px;padding:0 12px 14px;background:var(--kh-bg);border-top:1px solid var(--kh-border);backdrop-filter:blur(14px)}
.kh-nav__item{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:48px;min-height:48px;color:var(--kh-text-muted);font-size:10.5px;font-weight:700;cursor:pointer}
.kh-nav__item[aria-current="page"]{color:var(--kh-red-light)}

/* ---------- tabs ---------- */
.kh-tabs{display:flex;gap:6px;padding:5px;background:rgba(26,15,11,0.60);border:1px solid var(--kh-border-on-dark);border-radius:var(--kh-radius-pill)}
.kh-tab{padding:8px 18px;border-radius:var(--kh-radius-pill);font-family:var(--kh-font-num);font-size:13px;font-weight:700;color:var(--kh-text-on-dark-muted);cursor:pointer}
.kh-tab[aria-selected="true"]{background:var(--kh-grad-gold);color:var(--kh-text-on-gold)}

/* ---------- ornament helpers ---------- */
.kh-pattern-diamond{background-image:url('brand/patterns/pattern-amazigh-diamond.svg');background-size:120px 120px;background-repeat:repeat}
.kh-pattern-stripe{background-image:url('brand/patterns/pattern-tent-stripe.svg');background-size:40px 64px;background-repeat:repeat}