/* ═══════════════════════════════════════════
   PLATFORM — the shared layer for ricrios.com and rrjjbb.com

   One import, both domains. Nothing here renders anything: this file
   declares primitives only, so adding it to a page changes nothing until
   that page starts referencing the tokens.

   Order matters. color and type declare roles that space and motion
   reference; motion is last because it is the only file with rules.

   Usage:
       <link rel="stylesheet" href="/css/platform/index.css">

   The four files can also be linked individually if a page needs to skip
   the motion rules — @import costs one extra round trip, and that is the
   one reason to do so.
   ═══════════════════════════════════════════ */

@import url("color.css");
@import url("type.css");
@import url("space.css");
@import url("motion.css");

/* Safe-area insets published as real custom properties. env() cannot be
   read back through getComputedStyle, so anything that needs these in
   JavaScript needs them mirrored here first. */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}