/* Trovely — shared brand tokens for landing explorations.
   Each variant owns its own layout + typography. This file only carries the
   brand palette + the base styling the shared globe component needs. */
:root{
  --navy:#16264F;        /* base text / ink */
  --navy-deep:#0D2053;   /* logo navy */
  --night:#080C18;       /* darkest night bg */
  --night-2:#0E1530;     /* night gradient stop */
  --coral:#F4796B;       /* accent "love" */
  --coral-soft:#FF7E7D;  /* logo heart coral */
  --gold:#E9B872;        /* accent "wonder" */
  --cream:#FAF7F2;       /* light surface */
  --card:#FFFDFA;        /* raised light surface */
  --muted:#6F7488;       /* secondary text on light */
  --line:rgba(22,38,79,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}

/* --- shared globe component ---
   Markup contract (identical across all variants):
   <div class="globe-stage" data-theme="night|glow|light" data-speed="0.004"
        data-markers="cities|none" data-tilt="0.28">
     <canvas class="globe-canvas"></canvas>
   </div>
   <script type="module" src="_globe.js"></script>
   The stage SIZE is set by each variant's own CSS (make it big). */
.globe-stage{position:relative;width:100%;aspect-ratio:1}
.globe-canvas{
  width:100%;height:100%;display:block;
  cursor:grab;touch-action:none;
  opacity:0;transition:opacity 1.2s var(--ease);
}
.globe-canvas.in{opacity:1}
.globe-canvas:active{cursor:grabbing}
@media(prefers-reduced-motion:reduce){
  .globe-canvas{transition:none}
}