/* 4,75 - foundations.
   Black, white, one red. System type only: SF ships optical sizing and
   tracking tables no webfont here would beat, and it costs zero bytes. */

:root {
  --bg:        #000000;
  --fg:        #ffffff;
  --dim:       rgba(255, 255, 255, 0.46);
  --faint:     rgba(255, 255, 255, 0.24);
  --hair:      rgba(255, 255, 255, 0.11);
  --hair-soft: rgba(255, 255, 255, 0.055);
  --raise:     rgba(255, 255, 255, 0.045);
  --raise-hi:  rgba(255, 255, 255, 0.085);
  --red:       #ff453a;          /* the only hue in the app: ones and alerts */
  --red-dim:   rgba(255, 69, 58, 0.5);

  /* Motion. Nothing linear, nothing ease-in-out. */
  --arrive:  cubic-bezier(0.16, 1, 0.3, 1);   /* things entering */
  --leave:   cubic-bezier(0.55, 0, 1, 0.45);  /* things exiting */
  --glide:   cubic-bezier(0.32, 0.72, 0, 1);  /* things repositioning */
  --t-micro: 110ms;
  --t-small: 220ms;
  --t-med:   380ms;

  --pad: clamp(1.25rem, 3.2vw, 2.75rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, -apple-system, "SF Pro Text", system-ui, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}

body { display: flex; flex-direction: column; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Numbers never reflow as they change - the whole app is numbers changing. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.dim   { color: var(--dim); }
.faint { color: var(--faint); }

.label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.19em;        /* small text wants positive tracking */
  text-transform: uppercase;
  color: var(--dim);
}

/* The house animation: content does not fade in, it comes into focus.
   Lifted 1:1 from Narew Labs (css/base.css) so the two apps feel related. */
@keyframes arrive {
  from { opacity: 0; filter: blur(7px); }
  to   { opacity: 1; filter: blur(0); }
}
.arrive { animation: arrive var(--t-med) var(--arrive) both; }

@keyframes depart {
  from { opacity: 1; filter: blur(0); }
  to   { opacity: 0; filter: blur(7px); }
}
.depart { animation: depart var(--t-small) var(--leave) both; }

/* Reduced motion keeps the meaning (things appear) and drops the movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  .arrive { animation: none; opacity: 1; filter: none; }
}