/* ============================================================================
   Abia State Government — brand foundation.

   Loaded FIRST by every layout, before app.css or mda.css. It exists as its own
   file for one reason: this platform has two large stylesheets serving different
   consoles, and duplicating the palette into both is how two consoles end up a
   shade apart from each other and from the state's own guidelines. One file,
   loaded by both, means there is nothing to keep in sync.

   Every value here is mirrored in App\Support\Brand, which is authoritative for
   PHP, and scripts/smoke/brand.php asserts the two agree. If you change a colour
   here, change it there, or the gate will tell you.

   Source: ABSG Visual Identity Guidelines v1.0, July 2024.
   ========================================================================== */

:root {
  /* ── Primary palette — MANDATED ────────────────────────────────────────────
     "The design language utilises a lot of white space (60% or more in most
     cases). Abia Red occupies around 15% of the design space, and Abia Gold
     around 5%." Red is for identity and emphasis. It is not a surface colour,
     and a page that is mostly red is not on brand — it is off brand loudly. */
  --abia-red:       #AA182C;   /* PANTONE 187 C            */
  --abia-gold:      #FFBF3C;   /* PANTONE 136 C            */
  --abia-grey:      #414042;   /* PANTONE Cool Grey 11 CP  */
  --abia-white:     #FFFFFF;

  /* ── Secondary palette — MANDATED, AND MANDATED NOT TO BE MIXED ────────────
     "Remember to use only one of the three colour palettes — never mix!"
     Declared so the values exist and are greppable. This platform uses the
     PRIMARY palette; these are not here to be sprinkled into it. */
  --abia-green:     #019447;   /* PANTONE 348 C       */
  --abia-black:     #1A1617;   /* PANTONE Black C     */
  --abia-orange:    #F05326;   /* PANTONE Orange 021 C */

  /* ── Ramps ────────────────────────────────────────────────────────────────
     Built around the mandated anchors, monotonic in luminance, and every step
     labelled with what it can legibly carry. The anchors are fixed points: the
     ramp bends around them rather than the other way round.

     Contrast was computed, not eyeballed. Every pairing this platform actually
     uses is listed at the foot of this block with its measured ratio. */

  /* Abia Red. #AA182C is step 700 and is MANDATED — do not move it. */
  --abia-red-50:  #FDF2F4;
  --abia-red-100: #FBE3E7;
  --abia-red-200: #F5C2C9;
  --abia-red-300: #EC94A1;
  --abia-red-400: #DE5C70;
  --abia-red-500: #C93049;
  --abia-red-600: #B81F35;
  --abia-red-700: #AA182C;   /* MANDATED — Abia Red, PANTONE 187 C */
  --abia-red-800: #8A1324;
  --abia-red-900: #6B0F1B;
  --abia-red-950: #470A12;

  /* Abia Gold. #FFBF3C is step 400 — it is a light, bright colour and sits
     naturally near the top of a ramp, not the middle.

     THE TRAP: white text on Abia Gold measures 1.64:1. That is not a marginal
     fail, it is unreadable. Gold is a surface for DARK text (10.90:1) and
     nothing else. Anything needing white text must use gold-700 or darker. */
  --abia-gold-50:  #FFFBF0;
  --abia-gold-100: #FFF5DB;
  --abia-gold-200: #FFE9B0;
  --abia-gold-300: #FFD673;
  --abia-gold-400: #FFBF3C;  /* MANDATED — Abia Gold, PANTONE 136 C */
  --abia-gold-500: #F0A711;
  --abia-gold-600: #CE8407;
  --abia-gold-700: #A4620A;
  --abia-gold-800: #874F10;
  --abia-gold-900: #734111;
  --abia-gold-950: #432105;

  /* Neutrals, re-anchored from the old slate-blue onto Abia Cool Grey. The ramp
     terminates on Abia Black, so both mandated neutrals are load-bearing points
     on one scale rather than two colours floating beside it. */
  --abia-neutral-50:  #F7F7F8;
  --abia-neutral-100: #EFEFF0;
  --abia-neutral-200: #DEDEE0;
  --abia-neutral-300: #C5C5C8;
  --abia-neutral-400: #9B9B9F;
  --abia-neutral-450: #8E8E92;   /* the CONTROL BOUNDARY step — see below */
  --abia-neutral-500: #77777B;   /* large text and UI components only — 4.46:1 */
  --abia-neutral-600: #5C5B5F;
  --abia-neutral-700: #414042;   /* MANDATED — Abia Cool Grey, PANTONE Cool Grey 11 CP */
  --abia-neutral-800: #333234;
  --abia-neutral-900: #232224;
  --abia-neutral-950: #1A1617;   /* MANDATED — Abia Black, PANTONE Black C */

  /* The boundary of an interactive control answers to WCAG 1.4.11, which asks
     for 3:1 against its surroundings — a stricter bar than a decorative rule.
     neutral-300 measures 1.72:1 on white, so every form field on this platform
     had a border that a low-vision citizen could not see at all. neutral-400 is
     2.77:1 and still short; neutral-500 clears it but paints a visibly heavy
     line on a 360px screen. neutral-450 is the lightest step that passes on
     BOTH the white card (3.26:1) and the page grey (3.05:1). */
  --control-border: var(--abia-neutral-450);

  /* ── Semantic states ──────────────────────────────────────────────────────
     THE PROBLEM THIS SOLVES, because it is not obvious and it is easy to undo:
     the brand is now RED. Every convention says errors are red too. If both are
     red then a citizen cannot tell "this is the government's colour" from "this
     went wrong", and a destructive button becomes indistinguishable from a
     primary one sitting next to it.

     So brand red is reserved for identity — primary actions, links, active
     navigation — and the state colours come from the SECONDARY palette, used as
     one palette as the guidelines require rather than picked across several.

     Being honest about the limit: danger orange sits about 22 degrees from
     brand red in hue, so they are the same family. What separates them in use
     is lightness, context and the fact that a danger state never appears
     without an icon and words. Colour is never the only signal here — that is
     also what keeps this usable for colour-blind citizens. */
  --success-fg:      #017A3A;   /* Abia Green, darkened to carry text — 5.46:1 */
  --success-surface: #E6F5EC;
  --warning-fg:      #8A5A00;   /* Abia Gold, darkened to carry text — 5.93:1 */
  --warning-surface: #FFF6E0;
  --danger-fg:       #C43A16;   /* Abia Orange, darkened to carry text — 5.30:1 */
  --danger-surface:  #FDECE6;
  --info-fg:         #414042;   /* the primary palette's own neutral — 10.31:1 */
  --info-surface:    #F1F1F2;

  /* ── Measured contrast, for whoever changes these next ────────────────────
     white on red-700 ................ 7.30:1  AAA
     red-700 text on white ........... 7.30:1  AAA
     neutral-700 body text on white .. 10.31:1 AAA
     neutral-600 muted on white ...... 6.74:1  AA
     dark text on gold-400 ........... 10.90:1 AAA
     WHITE text on gold-400 .......... 1.64:1  FAILS — never do this
     success/warning/danger text ..... 5.46 / 5.93 / 5.30, and >= 4.6 on tints
     Everything the platform uses clears AA; most clears AAA. */

  /* ── Typography — MANDATED ────────────────────────────────────────────────
     Helvetica Neue primary, Arial the sanctioned substitute. Helvetica Neue
     cannot be licensed for web embedding, so this stack lands on the mandated
     face where it exists and the sanctioned substitute everywhere else.
     Roboto is in the list because Android — which is most of this platform's
     traffic — ships no Arial at all, and omitting it would mean the typeface
     rule silently did not apply to the majority of citizens. No web font is
     fetched: on a market 3G connection that is a render-blocking round trip for
     a face the device already has. */
  --abia-font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", Roboto, system-ui, sans-serif;
}

/* ============================================================================
   The logo lockup.

   Geometry measured from the vector artwork on the guidelines' Primary Logo
   Construction page, not transcribed from its prose — the two disagree. The
   written rule says "the ratio of the wordmark height (including line spacing)
   to the emblem height is 2:1", which read literally makes the wordmark twice
   the height of the emblem. The diagram shows the emblem plainly taller, and
   measuring the artwork gives emblem 106.17 x 85.67pt against a 17.47pt
   wordmark — an emblem-to-wordmark ratio of about 2:1. The artwork wins.

   EVERY dimension derives from --lockup-emblem, so the guideline that the logo
   must be resized "as one unit" holds by construction: there is only one number
   to change, and the rest follow.
   ========================================================================== */

.lockup {
  /* Emblem HEIGHT. Never below 57px — 1.5cm at 96dpi, the mandated minimum.
     Below that the coat of arms stops resolving into anything. */
  --lockup-emblem: 64px;
  --lockup-font: calc(var(--lockup-emblem) * 0.204);
  /* One capital A in Helvetica Neue Bold, the guidelines' unit of spacing. */
  --lockup-a: calc(var(--lockup-font) * 0.722);
  /* MANDATED: "minimum clear space around the logo is equal to the width of
     three A characters from all sides". */
  --lockup-clear: calc(var(--lockup-a) * 3);

  display: inline-flex;
  align-items: center;
  gap: var(--lockup-a);
  font-family: var(--abia-font);
  color: var(--abia-black);
  text-decoration: none;
  /* The clear space is reserved by the logo itself so surrounding layout
     physically cannot encroach on it. */
  padding: var(--lockup-clear);
}

.lockup__emblem {
  height: var(--lockup-emblem);
  width: auto;
  flex: none;
  display: block;
}

.lockup__wordmark {
  display: flex;
  flex-direction: column;
  /* MEASURED: baseline-to-baseline is 1.5x the font size. */
  line-height: 1.5;
  font-size: var(--lockup-font);
  /* MANDATED: "The black typography ensures superior readability (at various
     sizes), professionalism, and durability." */
  color: var(--abia-black);
  white-space: nowrap;
}

/* MANDATED: the state name is bold on the first line, the entity on the second.
   The order is fixed — "Do not alter the order of the country name and the
   ministry name." */
.lockup__state  { font-weight: 700; letter-spacing: -0.005em; }
.lockup__entity { font-weight: 400; letter-spacing: -0.005em; }

/* Primary: emblem above the wordmark, both centred. The preferred composition
   whenever there is room for it. */
.lockup--primary {
  flex-direction: column;
}
.lockup--primary .lockup__wordmark { text-align: center; align-items: center; }

/* Horizontal: emblem left, wordmark right, wordmark left-aligned. The
   guidelines nominate this for "designs and layouts where vertical space is
   restricted", which is precisely a web header. */
.lockup--horizontal {
  flex-direction: row;
}
.lockup--horizontal .lockup__wordmark { text-align: left; align-items: flex-start; }

/* Wordmark only: for use over photographs, where the guidelines say the emblem
   should not go, and for genuinely tight space. */
.lockup--wordmark {
  --lockup-font: calc(var(--lockup-emblem) * 0.204);
  padding: calc(var(--lockup-a) * 3);
}

/* Dark surfaces. The guidelines ask for a white single-colour emblem here; that
   is a separate piece of ARTWORK which only the state's design consultants can
   produce, and mechanically knocking the full-colour emblem to a white
   silhouette would flatten a detailed coat of arms into a blob and would count
   as recolouring the logo, which is forbidden. So this uses the other route the
   guidelines explicitly sanction: "Create a white full-bleed banner ... to serve
   as a white background for the logo. In this case, use the full-colour logo."
   The wordmark, being type rather than artwork, may legitimately go white. */
.lockup--inverse .lockup__wordmark,
.lockup--inverse .lockup__state,
.lockup--inverse .lockup__entity { color: var(--abia-white); }

.lockup--inverse .lockup__emblem {
  background: var(--abia-white);
  border-radius: 2px;
  padding: calc(var(--lockup-a) * 0.5);
  box-sizing: content-box;
}

/* Small screens keep the mandated minimum rather than shrinking below it. A
   logo that is too small to read is not a smaller logo, it is a smudge.

   Below 640px the horizontal lockup drops to the WORDMARK arrangement instead
   of shrinking. That is the guidelines' own instruction for the case —
   "used in cases where using the emblem is not permissible or space is
   limited" — and it is the honest way to fit a phone: an emblem at the
   mandated 57px plus its mandated clear space needs 107px of height, which on
   a 640px-tall screen is a sixth of the viewport spent on a masthead. */
@media (max-width: 640px) {
  .lockup { --lockup-emblem: 57px; }
  .lockup--horizontal .lockup__emblem { display: none; }
}
/* The wordmark stays on one line per element at every size. Letting it wrap
   turned "Abia State Government / Services Portal" into three ragged lines in
   the phone masthead — the state's name broken across a line is not a smaller
   logo, it is a worse one. Where the space genuinely is not there, the
   arrangement changes (above); the type does not reflow. */

@media (prefers-reduced-motion: no-preference) {
  a.lockup { transition: opacity .15s ease; }
}
a.lockup:hover { opacity: .88; }
a.lockup:focus-visible {
  outline: 3px solid var(--abia-red);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── The hidden attribute must actually win ────────────────────────────────
   `[hidden] { display: none }` lives in the USER-AGENT stylesheet, and any
   author rule that sets its own `display` beats it regardless of specificity —
   author origin outranks UA origin. So `.pwa-card { display: flex }` silently
   defeated `hidden`, and the install invitation rendered 121px tall on every
   page, for every citizen, on every platform, no matter what the JavaScript
   set. Measured, not assumed.

   Every `el.hidden = true` on the platform depends on this holding, which is
   why it is declared once here rather than patched per component. */
[hidden] { display: none !important; }