/* ============================================================================
   BB84 VAULT / TOKENS
   The same raw material as the CRM, value for value, so a person moving
   between the two sees one system.

   Colour, type scale, spacing, radius, motion. Nothing here draws a component;
   everything here is the raw material the other two files spend.

   The element baseline lives at the bottom, because that is the first place
   the tokens are applied and there is nowhere else it could go: this system is
   three files and no screen may carry a rule of its own.
   ========================================================================= */

@font-face{
  font-family:'Orbitron';
  src:url('/fonts/Orbitron-Medium.woff2') format('woff2'),
      url('/fonts/Orbitron-Medium.woff') format('woff');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Orbitron';
  src:url('/fonts/Orbitron-Bold.woff2') format('woff2'),
      url('/fonts/Orbitron-Bold.woff') format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  /* --- colour -------------------------------------------------------------
     One ink, one accent. Surfaces are the ink lifted by a percentage rather
     than separate greys, so every panel sits in the same family whatever it
     is stacked on. */
  --ink:            #0B0B0F;
  --surface-1:      rgba(240,240,236,.030);
  --surface-2:      rgba(240,240,236,.055);
  --surface-3:      rgba(240,240,236,.085);
  --hairline:       rgba(240,240,236,.085);

  --text-1:         #F0F0EC;
  --text-2:         rgba(240,240,236,.62);
  --text-3:         rgba(240,240,236,.38);

  --accent:         #00B4D8;
  --accent-bright:  #3FD0EF;
  --accent-wash:    rgba(0,180,216,.13);
  --accent-edge:    rgba(0,180,216,.38);

  --danger:         #E0707A;
  --positive:       #4ED6A8;

  /* --- type ---------------------------------------------------------------
     Orbitron is identity only: the wordmark and screen titles. Everything a
     person actually reads is the companion face. Monospace is for figures. */
  --font-identity:  'Orbitron', 'Helvetica Neue', Arial, sans-serif;
  --font-body:      'Helvetica Neue', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-figure:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --size-display:   28px;
  --size-title:     20px;
  --size-heading:   16px;
  --size-body:      14px;
  --size-small:     13px;
  --size-label:     11px;
  --size-micro:     10px;

  --line-tight:     1.25;
  --line-body:      1.55;
  --line-prose:     1.7;

  --track-identity: .06em;
  --track-label:    .14em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-strong:  600;
  --weight-heavy:   700;

  /* --- spacing ------------------------------------------------------------
     A four point scale. Components spend these; screens never invent one. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 80px;

  /* --- radius -------------------------------------------------------------
     There are no right angles. Anything you press or type into is a pill;
     anything that holds content takes a generous corner. */
  --radius-pill:    999px;
  --radius-tight:   12px;
  --radius-panel:   18px;
  --radius-large:   24px;

  /* --- control ------------------------------------------------------------
     The height of anything you press or type into at the default size. It is
     not a free choice: it is the body size at the body line height plus the
     field padding and the hairline, and every button and field arrives at it
     on its own. It is written down because a date and a file field are sized
     by the browser rather than by this and have to be told what to match. */
  --control-height: 46px;

  /* --- measure ------------------------------------------------------------
     A measure applies to text and forms. It never applies to a board. */
  --measure-text:   640px;
  --measure-form:   960px;
  --measure-page:   1180px;
  --measure-wide:   1280px;

  /* --- motion -------------------------------------------------------------
     Short and flat. Motion confirms an action; it never performs. */
  --motion-fast:    .12s;
  --motion-base:    .18s;
  --motion-ease:    cubic-bezier(.2,.6,.3,1);

  /* --- elevation ---------------------------------------------------------- */
  --shadow-lifted:  0 24px 60px rgba(0,0,0,.45);
}

/* --- element baseline ---------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box }

html,body{ height:100% }

body{
  margin:0;
  background:var(--ink);
  color:var(--text-1);
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:var(--line-body);
  -webkit-font-smoothing:antialiased;
}

/* Scrollbars are part of the surface, not a system artefact dropped on top of
   it: thin, rounded, and never a grey slab. */
*{ scrollbar-width:thin; scrollbar-color:rgba(240,240,236,.14) transparent }
*::-webkit-scrollbar{ width:8px; height:8px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{
  background:rgba(240,240,236,.12); border-radius:var(--radius-pill);
  border:2px solid transparent; background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background:rgba(240,240,236,.24); background-clip:content-box }
*::-webkit-scrollbar-corner{ background:transparent }

/* There is never a horizontal scroll, at any width. The screens are built not
   to need one and scripts/check.mjs measures every element to prove it; this
   is the backstop, so a single unbroken string can never be the thing that
   adds a sideways bar. */
html,body{ overflow-x:clip; max-width:100% }

button,input,select,textarea{ font:inherit; color:inherit }
button{ cursor:pointer }
a{ color:inherit; text-decoration:none }
svg{ display:block }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}