/* Felt Route — tokens v0.1
   Marker paths on paper. Default mode is "paper"; "newsprint" is opt-in via
   data-fr-mode="newsprint". No OS light/dark switching, on purpose. */

@font-face { font-family: "Marram"; src: url("fonts/Marram-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Marram"; src: url("fonts/Marram-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Isobar"; src: url("fonts/Isobar-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* paper and graphite */
  --fr-paper: #fafafa;
  --fr-graphite: #1a1a1c;          /* dots, labels, pen lines, type */
  --fr-graphite-soft: #6b6b70;     /* captions, rail labels */
  --fr-ghost: 0.26;                /* opacity of a label before its stroke lands */

  /* inks: eight felt-tip markers, measured, renamed */
  --fr-ink-flame: #f74d3a;
  --fr-ink-coral: #f66a5b;
  --fr-ink-orchid: #f377e6;
  --fr-ink-lagoon: #1b8c8d;
  --fr-ink-yolk: #e7d13c;
  --fr-ink-cobalt: #3f52e7;
  --fr-ink-periwinkle: #5f70ef;
  --fr-ink-slate: #394c78;
  --fr-ink-opacity: 0.9;           /* markers are translucent; overlaps multiply */

  /* drawing geometry, in drawing units (1440-wide canvas). Read by felt-route.js */
  --fr-marker: 13;                 /* marker width = 0.9% of canvas width */
  --fr-dot: 12;                    /* dots are the marker's width */
  --fr-pen: 1.4;                   /* pen line width */
  --fr-gap: 14;                    /* strokes stop this far short of a dot, both ends */
  --fr-barb: 24;                   /* arrowhead barb length */
  --fr-label: 12.5;                /* label size */

  /* faces */
  --fr-face-display: "Marram", Georgia, serif;
  --fr-face-text: "Marram", Georgia, serif;
  --fr-face-hand: "Gochi Hand", "Marker Felt", "Comic Sans MS", cursive;
  --fr-face-rail: "Isobar", "Helvetica Neue", Arial, sans-serif;

  /* motion: durations */
  --fr-speed: 65;                  /* marker widths per second while drawing */
  --fr-dur-stroke-min: 300ms;
  --fr-dur-stroke-max: 1100ms;
  --fr-dur-head: 180ms;            /* the arrowhead is its own stroke */
  --fr-dur-pop: 110ms;             /* target dot arrives */
  --fr-dur-settle: 220ms;          /* label goes ghost → ink */
  --fr-dur-clear: 200ms;           /* a finished step fades out together */
  --fr-dur-follow: 550ms;          /* camera follows the pen */
  --fr-dur-bloom: 4200ms;          /* a whole map grows */
  --fr-dur-rail: 350ms;            /* machine line, fixed whatever its length */
  --fr-hold-rail: 500ms;
  --fr-hold-step: 1800ms;          /* hold longer than you move */
  --fr-stagger-orbit: 135ms;
  --fr-stagger-fan: 90ms;

  /* motion: curves */
  --fr-ease-pen: cubic-bezier(0.2, 0.2, 0.5, 1);       /* measured: quick start, long landing */
  --fr-ease-head: cubic-bezier(0.1, 0.6, 0.3, 1);
  --fr-ease-settle: cubic-bezier(0.25, 0.8, 0.3, 1);
  --fr-ease-follow: cubic-bezier(0.45, 0, 0.2, 1);
  --fr-ease-rail: linear;
}

[data-fr-mode="newsprint"] {
  --fr-paper: #e6e5e0;
  --fr-graphite: #1f1f22;
  --fr-graphite-soft: #5d5d60;
  --fr-ghost: 0.22;
  --fr-ink-flame: #e8604f;
  --fr-ink-coral: #e77a6e;
  --fr-ink-orchid: #d982cf;
  --fr-ink-lagoon: #4f9a92;
  --fr-ink-yolk: #e2d25e;
  --fr-ink-cobalt: #6670cf;
  --fr-ink-periwinkle: #7d86d6;
  --fr-ink-slate: #4d5571;
  --fr-ink-opacity: 0.82;
}