/* ============================================================
   REVORA NFC brand tokens. ONE file, imported by the landing page,
   the six profile pages and the dashboard. Change a colour here and
   it changes everywhere. The name is always REVORA, never Revora.
   ============================================================ */
:root{
  /* palette: cream, periwinkle, electric blue, coral */
  --cream:#ffe1d7; --cream-deep:#ffcdbd; --cream-pale:#fff2ec; --white:#fffaf7;
  --peri:#84affb; --peri-pale:#d1e1fc;
  --blue:#0259dd; --blue-deep:#0142a6; --blue-ink:#02245e; --ink:#061024; --ink-deep:#030a18;
  --coral:#ff6648; --coral-deep:#ec4c2c;
  --ok:#2e9e6b; --warn:#e0a020; --bad:#d9412c;

  /* on cream */
  --fg:#02419f; --fg-mute:rgba(2,65,159,.80); --fg-soft:rgba(2,65,159,.42);
  --hair:rgba(2,89,221,.20); --hair-strong:rgba(2,89,221,.32);

  /* type */
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --wordmark:'Salisbury','Archivo',Georgia,serif;
  --arabic:'IBM Plex Sans Arabic','Noto Kufi Arabic',system-ui,sans-serif;

  /* motion */
  --e:cubic-bezier(.215,.61,.355,1);
  --t1:.2s; --t2:.45s; --t3:.65s; --t4:.8s;

  /* geometry: round, never boxy */
  --r-s:14px; --r:22px; --r-l:34px; --r-xl:48px; --pill:999px;

  /* glass: the same recipe on a light ground and on the ink */
  --blur:18px;
  --glass-light:rgba(255,250,247,.58); --glass-light-line:rgba(255,255,255,.75); --glass-light-shadow:0 30px 60px -36px rgba(2,36,94,.35);
  --glass-dark:rgba(255,255,255,.055); --glass-dark-line:rgba(255,255,255,.11); --glass-dark-top:rgba(255,255,255,.18); --glass-dark-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}

/* the wordmark: one SVG, coloured by `color`. Set --nm (the name height) to size it. */
.lockup{--nm:19px;display:inline-flex;align-items:center;line-height:0;transition:transform var(--t1) var(--e);color:var(--white)}
.lockup svg{height:calc(var(--nm) * 1.6);width:auto;overflow:visible;display:block}
.lockup:hover{transform:translateY(-2px)}
.lockup .chip{transition:fill var(--t1) var(--e)}
.lockup:hover .chip{fill:var(--coral)}
.lockup:hover .nfc{fill:var(--blue-ink)}
.lockup .arcs path{opacity:.28;animation:lkarc 2.3s var(--e) infinite}
.lockup .arcs path:nth-child(2){animation-delay:.18s}
.lockup .arcs path:nth-child(3){animation-delay:.36s}
.lockup:hover .arcs path{animation-duration:1.1s}
@keyframes lkarc{0%,100%{opacity:.24;transform:translateX(0)}40%{opacity:1;transform:translateX(1px)}}
.lockup.onlight{color:var(--blue)}
.lockup.onlight .chip{stroke:var(--coral-deep)}
.lockup.onlight .nfc{fill:var(--coral-deep)}
.lockup.onlight:hover .chip{fill:var(--coral-deep)}
.lockup.onlight:hover .nfc{fill:var(--white)}
@media(prefers-reduced-motion:reduce){.lockup .arcs path{animation:none;opacity:.8}}