/* ============================================================================
   BB84 v2 — TOKENS
   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 }

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 }
}