/* ==========================================================================
   URIM Technologies — shared design tokens
   Single source of truth for the terminal + marketing surfaces.
   v4 — designer brand spec (Aug 2026). Navy #000080 on white; greys
   #F7F7F9 / #D2D2D4 / #929294; Almarai display over Public Sans body.
   ========================================================================== */

:root{
  /* ground — white / designer light-grey ramp */
  --bg:#ffffff; --bg2:#F7F7F9; --panel:#ffffff; --panel2:#F7F7F9;
  --line:#D2D2D4; --line2:#b9b9bd;

  /* ink — near-black, neutral greys below. --dim is the designer's dark grey;
     --muted is darker than the spec grey because #929294 fails contrast for
     body text — it stays label/caption-only. */
  --ink:#101018; --muted:#54545c; --dim:#929294;

  /* signal — Navy #000080 (--cy) is the brand; --cy2 deeper for press/emphasis.
     --blue is a lighter navy kept for chart-series contrast on white.
     Names carried over so token consumers stay untouched. */
  --cy:#000080; --cy2:#00005e; --blue:#2f56d4; --gold:#a5750c; --red:#d92d20;

  /* type — Almarai display (designer primary), Public Sans text */
  --display:'Almarai',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sans:'Public Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* rhythm */
  --gut:clamp(20px,5vw,40px);
  --sec:clamp(64px,11vw,132px);
  --rad:4px;

  /* logo mark — rings in designer dark grey */
  --ring:#929294;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--bg)}
body{
  margin:0;color:var(--ink);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%}
.mono{font-family:var(--mono)}

/* display face on headings + brand marks; body stays Public Sans */
h1,h2,h3,h4,.logo,.mark{font-family:var(--display)}

/* accessible focus — institutional buyers run keyboard + AT audits */
:focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:2px}

/* micro-label: the recurring uppercase tracking-wide caption */
.eyebrow{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}

/* --------------------------------------------------------------------------
   Brand mark — 3×4 grid of silver rings, one navy filled.
   Drop <svg class="mark-grid">…</svg> in place of the old pulsing dot.
   The .logo/.brand/.mark wordmark shows "URIM" bold + "TECHNOLOGIES" tracked.
   -------------------------------------------------------------------------- */
.mark-grid{flex:none;display:block;height:34px;width:25.5px}
.mark-grid circle{fill:none;stroke:var(--ring);stroke-width:1.7}
.mark-grid .on{fill:var(--cy);stroke:var(--cy)}
.wm{display:inline-flex;align-items:baseline;gap:.42em;line-height:1}
.wm b{font-weight:700;letter-spacing:.16em}
.wm s{font-weight:600;letter-spacing:.24em;font-size:.74em;color:var(--muted);
  text-decoration:none;text-transform:uppercase}

/* corner-ticked panel — the core container motif */
.panel{
  position:relative;border:1px solid var(--line);border-radius:var(--rad);
  background:linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%);
}
.panel::before,.panel::after{
  content:"";position:absolute;width:9px;height:9px;pointer-events:none;
  border-color:var(--line2);border-style:solid;
}
.panel::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.panel::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}