/* tokens
   Design tokens, reset and the two type treatments everything else builds on.

   Loaded by `stylesheet_link_tag :app`, which includes every .css under
   app/assets sorted by filename — so the NUMBER PREFIX IS THE CASCADE ORDER.
   Renaming a file moves it in the cascade. */

:root {
  --ink:        #17191A;
  --ink-2:      #4A4E4F;
  --ink-3:      #7C8183;
  --paper:      #F4F4F1;
  --surface:    #FFFFFF;
  --sunken:     #FAFAF8;
  --line:       #E3E4E0;
  --line-2:     #C9CBC5;

  --signal:     #9E5A11;
  --signal-bg:  #FBF2E5;
  --signal-line:#E8CFA8;

  --danger:     #973024;
  --danger-bg:  #FAEBE8;
  --ok:         #2B6449;
  --ok-bg:      #E8F1EC;

  --r:   6px;
  --r-lg: 10px;
  --ui:   "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
}

/* Measured values read differently from prose — formulas are code,
   dimensions are measurements. */
.mono, input.mono, textarea.mono, .num, code { font-family: var(--mono); }

.eyebrow {
  font: 500 11px/1 var(--ui);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}