/* =============================================================================
   ezycloud Client Area Theme — ENTRY POINT
   -----------------------------------------------------------------------------
   Stage A. Foundation only: the missing font weight and the design tokens.
   No component styling yet, so installing this changes nothing you can see.
   That is the intended result — Stage A is verified by the theme registering
   and the tokens resolving, not by anything looking different.

   HOW THIS FILE GETS LOADED
   Confirmed against the live server, not assumed. Twenty-One's
   includes/head.tpl ends with:

       {assetExists file="custom.css"}
       <link href="{$__assetPath__}" rel="stylesheet">
       {/assetExists}

   So WHMCS picks this file up automatically from the child theme, and loads it
   LAST — after all.min.css and theme.min.css. That gives it the highest cascade
   priority of any stylesheet on the page, and means this theme overrides no
   parent template at all. Every future WHMCS update to head.tpl is inherited
   for free.

   LOAD ORDER WITHIN THIS FILE IS SIGNIFICANT
     1. Open Sans  — the one weight (700) WHMCS does not ship
     2. Montserrat — display face for headings, buttons and badges
     3. tokens     — AbsoluteAdmin design system, brand-neutral
     4. brand      — ezycloud/ezyreseller overrides, must come last

   WHY @import HERE
   Three files are easier to review than one, and at Stage A the cost is
   irrelevant because nothing is styled yet. @import does serialise requests,
   so these are concatenated into a single stylesheet at Stage B, when there is
   real component CSS and the render path starts to matter. Deliberate and
   temporary.
   ========================================================================== */

@import url('../fonts/open-sans/open-sans.css');
@import url('../fonts/montserrat/montserrat.css');
@import url('ezycloud-tokens.css');
@import url('ezycloud-brand.css');
@import url('ezycloud-shell.css');
@import url('ezycloud-sidebar.css');
@import url('ezycloud-tray.css');
@import url('ezycloud-status.css');
@import url('ezycloud-tables.css');
@import url('ezycloud-marketing.css');

/* -----------------------------------------------------------------------------
   STAGE A SELF-TEST

   Inert unless you add the class by hand. On any client area page, open the
   browser console and run:

       document.body.classList.add('ezy-stage-a-test')

   A two-line bar appears at the top of the page. Four things are proved at once:

     Bar appears at all   custom.css was found and all four @imports resolved
     Bar is ezycloud blue brand layer loaded AFTER tokens (not #3498db)
     Top line is Montserrat    the display face is loading — wide, geometric
     Bottom line is Open Sans  the 700 weight this theme adds is loading

   The two lines must look like DIFFERENT TYPEFACES, not just different weights.
   Montserrat has circular bowls and noticeably wider letterforms; Open Sans is
   narrower with more conventional shapes. If both lines look the same, one of
   the two font directories is not being served — check the paths.

   Reload the page to clear it. This block is deleted at Stage B.
   -------------------------------------------------------------------------- */

body.ezy-stage-a-test::before,
body.ezy-stage-a-test::after {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 99999;
  padding: 8px 16px;
  background: var(--ezy-primary);
  color: var(--ezy-on-primary);
  font-size: var(--aa-font-size-base);
  line-height: var(--aa-line-height-base);
  text-align: center;
  letter-spacing: .2px;
}

body.ezy-stage-a-test::before {
  content: 'Stage A OK — tokens resolved, brand layer applied. This line is MONTSERRAT 600.';
  top: 0;
  font-family: var(--aa-font-family-heading);
  font-weight: 600;
}

body.ezy-stage-a-test::after {
  content: 'This line is OPEN SANS 700, the weight WHMCS does not ship. It must look like a different typeface.';
  top: 39px;
  font-family: var(--aa-font-family-humanist);
  font-weight: 700;
  border-top: 1px solid rgba(255, 255, 255, .35);
}