/* 3rigx tokens: one source for the site and the dashboard. See DIRECTION.md for where each value comes from. */

@font-face {
  font-family: Fredoka;
  src: url(../fonts/fredoka-vf.woff2) format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url(../fonts/plex-sans-vf.woff2) format("woff2");
  font-weight: 100 700;
  font-display: swap;
}
/* Metric-matched fallbacks (scripts/fallback.mjs), so nothing jumps when the fonts arrive. */
@font-face {
  font-family: "Fredoka Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica");
  size-adjust: 99.38%; ascent-override: 97.6%; descent-override: 24.15%; line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica");
  size-adjust: 99.43%; ascent-override: 103.59%; descent-override: 28.16%; line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* Colour, by job. A light room: the page is lit, while the phones and the demo PC stay dark, like real screens. */
  --ground: #F6F5FA;      /* the room with the lights on, tinted toward his bubble */
  --ground-2: #ECEAF2;    /* the desk: a raised band */
  --surface: #FFFFFF;     /* things that float */
  --ink: #17151F;         /* his ink, 16:1 on the ground */
  --ink-2: #57536A;       /* secondary text, 6.8:1 on the ground */
  --rule: #DFDCE7;        /* hairlines */
  --rule-2: #85809A;      /* control borders, 3:1 on the ground and the desk */
  --accent: #3DDC84;      /* the ONE job: his listening glow, the download, anything live. A fill only on light. */
  --accent-hover: #2FCB75;
  --accent-ink: #05170D;
  --accent-text: #137A43; /* his green where it's text, a line or a dot on the light ground (5:1) */
  --screen-ink: #EDEBF5;  /* text on the dark screens (phones, the demo PC) */
  --hair: #6C86F5;        /* only in his drawing and his bubble's outline */
  --bubble-top: #FFFFFF;
  --bubble-bottom: #EEF0FF;
  --bubble-ink: #17151F;
  --card-ink-2: #5A5570;  /* secondary text on his light cards (the app's #B9B2CC fails contrast on white) */
  --done: #1F9D57;        /* a finished step, from the app's task card */
  --danger: #B3261E;      /* errors, the app's Stop red, 6:1 on the ground */
  --focus: #137A43;

  /* Type. Fredoka is his voice (both apps set his speech bubbles in it); Plex Sans is his Windows dashboard. */
  --font-display: Fredoka, "Fredoka Fallback", "Varela Round", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-text: "IBM Plex Sans", "Plex Fallback", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --t-display: clamp(2.75rem, 1.5rem + 4.4vw, 5.25rem);
  --t-h2: clamp(2rem, 1.35rem + 2.3vw, 3.5rem);
  --t-h3: 1.375rem;
  --t-body: 1.125rem;
  --t-small: 0.9375rem;
  --t-meta: 0.8125rem;

  /* Space, radius (his cursor: three round corners and one sharp tip), motion. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px; --s-9: 160px;
  --r-tip: 3px;
  --r-s: 10px;
  --r-m: 20px;
  --r-bubble: 24px;
  --r-l: 28px;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --flight: cubic-bezier(.42, 0, .22, 1); /* his cursor's launch curve, from CursorEngine.cs */
  --spring: linear(0, 0.42 9%, 0.84 21%, 1.02 33%, 1.05 41%, 1.01 55%, 0.99 70%, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--rule-2) var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--t-body)/1.55 var(--font-text); }
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* His speech bubble, as both apps draw it: white to a cool tint, an outline in his hair colour, Fredoka. */
.bubble {
  position: relative;
  width: fit-content;
  max-width: 36ch;
  margin: 0;
  padding: 12px 20px 13px;
  background: linear-gradient(var(--bubble-top), var(--bubble-bottom));
  color: var(--bubble-ink);
  border: 2.5px solid var(--hair);
  border-radius: var(--r-bubble);
  font: 600 var(--t-body)/1.3 var(--font-display);
}
/* The tail: points down and a little left, toward where his cursor waits. */
.bubble::after {
  content: "";
  position: absolute;
  left: var(--tail-x, 28px);
  bottom: -10px;
  width: 16px;
  height: 16px;
  background: var(--bubble-bottom);
  border-right: 2.5px solid var(--hair);
  border-bottom: 2.5px solid var(--hair);
  transform: rotate(45deg) skew(-12deg, -12deg);
  border-bottom-right-radius: 3px;
}
.bubble.tail-left::after {
  left: -10px; top: calc(50% - 8px); bottom: auto;
  background: #F6F7FF;
  border: 0;
  border-left: 2.5px solid var(--hair);
  border-bottom: 2.5px solid var(--hair);
  border-radius: 0 0 0 3px;
}
.bubble.tail-up::after {
  top: -10px; bottom: auto;
  background: var(--bubble-top);
  border: 0;
  border-left: 2.5px solid var(--hair);
  border-top: 2.5px solid var(--hair);
  border-radius: 3px 0 0 0;
}

/* The primary action: the cursor's shape, sharp at the tip. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px 0 22px;
  border: 1px solid var(--done);
  border-radius: var(--r-tip) 999px 999px 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 1.0625rem/1 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; flex: none; }

@media (forced-colors: active) {
  .btn { border-color: ButtonText; }
  .bubble, .bubble::after { border-color: CanvasText; }
}