/* Jubail Commons — design tokens.
   Three layers, by precedence:
   1. :root            — platform defaults (ratified palette, brand pass 2026-11-02;
                         see docs/brand.md — replace values, never variable names).
   2. [data-community] — per-community overrides, applied at runtime from the
                         community's config row (brand lives in the DB).
   3. [data-theme]     — per-event overlays (e.g. haq-al-laila), applied on top.
   Modules style against variables only — never raw colors.

   OVERRIDE GUARDRAIL — layers 2 and 3 may set accent, brand-deep, surfaces,
   ink and shape tokens. They must NEVER set the four semantic signals:
     --jc-info    (teal — allergy-friendly / informational, reserved)
     --jc-danger  (red — alert)
     --jc-warn    (amber — warning)
     --jc-good    (green — available / confirmed)
   A community that restyles a safety signal breaks it for its residents.
   The config loader DROPS these keys from override rows; keep it that way. */

:root{
  /* surfaces — warm dark (product default) */
  --jc-bg:#141210;
  --jc-surface:#1f1c17;
  --jc-surface-2:#2a2620;
  --jc-line:#3b352c;
  /* text */
  --jc-ink:#f6f2e9;
  --jc-muted:#a9a294;
  --jc-faint:#878072;  /* brightened from proposed #7a7365 — 4.77:1 on bg (was 3.98, fails AA for the 12px fine print it styles) */
  /* roles */
  --jc-accent:#3e9b76;        /* primary action — mangrove */
  --jc-accent-ink:#06231b;    /* text on accent */
  --jc-brand-deep:#14453a;    /* brand chrome: headers, admin band, the mark */
  --jc-good:#6fcf8f;
  --jc-warn:#f2b33c;
  --jc-danger:#ef7b7b;
  --jc-info:#58c4d4;          /* allergy-friendly / informational marker */
  /* shape & type */
  --jc-radius:14px;
  --jc-radius-pill:999px;
  --jc-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Arabic",
            "Geeza Pro",sans-serif;  /* one stack serves EN + AR */
  --jc-font-display:var(--jc-font);
}

/* Light — print, docs, light surfaces (warm sand) */
[data-theme="light"]{
  --jc-bg:#fbf7ef;
  --jc-surface:#ffffff;
  --jc-surface-2:#f4eee2;
  --jc-line:#e2d8c6;
  --jc-ink:#1b1a16;
  --jc-muted:#6a6456;
  --jc-faint:#7a6c50;        /* darkened from proposed #8a7a5c — 4.81:1 on sand (was 3.92) */
  --jc-accent:#1c6b52;        /* mangrove deep — mid green lacks contrast on sand */
  --jc-accent-ink:#fbf7ef;    /* #06231b on deep green is 2.59:1 — light ink required here */
}

/* Event-theme overlay example (values land with the event module) */
[data-theme="haq-al-laila"]{
  --jc-bg:#131129;
  --jc-surface:#1b1838;
  --jc-accent:#e8c05a;
}

/* RTL: layout must flow from direction, not from side-specific rules.
   Use margin-inline / padding-inline / inset-inline in all Commons CSS. */
[dir="rtl"]{ --jc-dir:rtl; }
[dir="ltr"]{ --jc-dir:ltr; }