/* Design tokens shared by every entrance.
   =========================================================================
   Lives in web/static/, NOT in an app, and is picked up through
   STATICFILES_DIRS — which `AppDirectoriesFinder` has no say over. That is the
   whole point: the www marketing entrances (DECISIONS.md §15) do not install
   apps.portal, so anything reachable from an app could not be shared with them.

   Contains ONLY things an entrance needs before it has any components of its
   own: the faces, the palette, a minimal reset and the direction utilities.
   Components belong to their entrance — portal/css/portal.css and so on.

   Collected to  <STATIC_ROOT>/design/css/tokens.css  in every entrance's own
   static root, so each entrance stays self-contained behind nginx.
   ========================================================================= */

/* ---------------- self-hosted fonts ----------------
   url() is relative to THIS FILE, i.e. static/design/css/ -> ../fonts/.
   NOTE: all four subsets are Latin-only — measured with fc-query — so Arabic
   and Cyrillic fall back to a system face. Re-cutting them with those ranges is
   the largest piece of the language work still outstanding. */
@font-face{font-family:'Space Grotesk';font-weight:600 700;font-style:normal;font-display:swap;src:url(../fonts/SpaceGrotesk.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400 600;font-style:normal;font-display:swap;src:url(../fonts/IBMPlexSans.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400 500;font-style:normal;font-display:swap;src:url(../fonts/IBMPlexMono.woff2) format('woff2')}
@font-face{font-family:'Readex Pro';font-weight:300 700;font-style:normal;font-display:swap;src:url(../fonts/ReadexPro.woff2) format('woff2')}

/* ---------------- shared neutral tokens ---------------- */
:root{
  --ink:#f4f6fb; --card:#ffffff; --line:rgba(12,22,42,.10); --line2:rgba(12,22,42,.16);
  --txt:#0b1220; --sub:#4c5872; --sub2:#7c88a2;
  --surface:rgba(12,22,42,.03); --surface2:rgba(12,22,42,.055);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* The language chooser's panel is the only place all three scripts appear at
     once — Latin, Arabic and Cyrillic together — whatever the page language, so
     it cannot use --body. */
  --script:'IBM Plex Sans','IBM Plex Sans Arabic','Noto Sans Arabic',
           'Noto Sans',system-ui,sans-serif;
  --r-card:20px; --r-btn:12px;
  --shadow:0 1px 2px rgba(12,22,42,.04),0 12px 32px rgba(12,22,42,.06);
  --warn:#8a6a12; --warn-bg:rgba(214,158,46,.16);
  --red:#e5484d; --red-bg:rgba(229,72,77,.12);

  /* Face DEFAULTS, so this file stands on its own. An entrance that sets no
     data-brand — the admin — still gets a full type stack; the brand blocks
     below override them for anything that does. Without these, var(--body) is
     unset outside the portal. */
  --disp:'Space Grotesk',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
}

/* ---------------- bVPN (blue) ---------------- */
:root[data-brand="bvpn"]{
  --accent:#2f7bff; --accent-d:#1f5fe0; --glow:rgba(47,123,255,.18);
  --price1:#6c4cf1; --price2:#9b6bff;
  --plan-a:#f0ecff; --plan-b:#f6f3ff; --plan-c:#eef1ff;
  --plan-border:rgba(108,76,241,.18); --plan-tint:rgba(108,76,241,.14);
  --chip:#6c4cf1; --chip-bd:rgba(108,76,241,.3);
  --mint:#12b981; --mint-bg:rgba(18,185,129,.12);
  --amber:#f4a72c; --amber-bg:rgba(244,167,44,.14); --sched-bg:#dcf2fb;
  --disp:'Space Grotesk',system-ui,sans-serif; --body:'IBM Plex Sans',system-ui,sans-serif;
}
/* ---------------- WASEL (green) ---------------- */
:root[data-brand="wasel"]{
  --accent:#35b14a; --accent-d:#248b39; --glow:rgba(53,177,74,.18);
  --price1:#35b14a; --price2:#5cc264;
  --plan-a:#e9f7ec; --plan-b:#f0fbf1; --plan-c:#eaf7ec;
  --plan-border:rgba(53,177,74,.18); --plan-tint:rgba(53,177,74,.14);
  --chip:#248b39; --chip-bd:rgba(53,177,74,.3);
  --mint:#5cc264; --mint-bg:rgba(92,194,100,.14);
  --amber:#8dc63f; --amber-bg:rgba(141,198,63,.16); --sched-bg:#e4f6e6;
  --disp:'Readex Pro',system-ui,sans-serif; --body:'Readex Pro',system-ui,sans-serif;
}

/* ---------------- Arabic ----------------
   Only the TOKEN swap lives here; the class-level letter-spacing overrides
   belong with the components that define those classes. letter-spacing severs
   Arabic cursive joins, so anything tracked has to drop it. */
[lang="ar"]{
  --disp:'IBM Plex Sans Arabic','Noto Sans Arabic','Segoe UI',Tahoma,system-ui,sans-serif;
  --body:'IBM Plex Sans Arabic','Noto Sans Arabic','Segoe UI',Tahoma,system-ui,sans-serif;
}

/* ---------------- minimal reset ---------------- */
*{box-sizing:border-box}
[hidden]{display:none!important}

/* ---------------- direction utilities ----------------
   An identifier must not reorder around its hyphens inside RTL text:
   `bvpn-k7m2xq9p` scrambles around the hyphen in an Arabic paragraph, and that
   string is user-visible and read back to support over the phone, so it has to
   be exact. Wrap account IDs, tokens, emails, IPs and dates. */
.ltr{direction:ltr;unicode-bidi:isolate}

/* Hidden from sight, still announced. Used for the chooser's "Language:". */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}