/* look: EMBER
   ---------------------------------------------------------------------------
   The only file in this artifact that knows a colour, a typeface or a texture.
   layout.css and graph.js address everything through these tokens, so a second
   look is a second file of the same shape and one <link> swap. Nothing here
   sets a position, a size in px, or a flow.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "STIX Two";
  src: url("../fonts/STIXTwoText.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "STIX Two";
  src: url("../fonts/STIXTwoText-Italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Code";
  src: url("../fonts/SourceCodePro.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}

:root {
  /* type */
  --type-display: "Jost", system-ui, sans-serif;
  --type-body: "STIX Two", Georgia, serif;
  --type-mono: "Source Code", ui-monospace, monospace;
  --tracking-display: 0.04em;
  --tracking-eyebrow: 0.22em;
  --weight-display: 300;
  --weight-strong: 600;

  /* ground */
  --ink: #f0ebe4;
  --ink-dim: #a49c92;
  --ink-faint: #6d665e;
  --ground: #0b0a09;
  --ground-lift: #141210;
  --ground-sink: #060505;
  --rule: #241f1b;
  --rule-bright: #3a322b;

  /* the two models in this tree */
  --model-a: #e0813a; /* the frontier model — warm, and it is the expensive one */
  --model-b: #6ea8a1; /* the cheaper model — cool */
  --model-a-soft: #6a3d1c;
  --model-b-soft: #2c4643;

  /* terminal states — these must never read as a shade of each other */
  --state-dead: #d8443c; /* killed: no completion record */
  --state-pending: #d8a33c; /* still running when the process went away */
  --state-refused: #7f8fb0; /* never dispatched, and that was the right call */

  --accent: var(--model-a);
  --sel: #fff4e8;

  /* texture */
  --radius: 2px;
  --edge-op: 0.5;
  --glow: 0 0 0 1px rgba(224, 129, 58, 0.35), 0 0 22px -6px rgba(224, 129, 58, 0.5);
  --sheet-shadow: 0 -18px 40px -18px rgba(0, 0, 0, 0.95);
  --grain: radial-gradient(
    ellipse 120% 70% at 50% -10%,
    rgba(224, 129, 58, 0.09),
    transparent 62%
  );
}

body {
  background: var(--ground);
  background-image: var(--grain);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--type-body);
}