/*
 * FlowJam UI foundations
 *
 * Artwork, photographs and the CD mould are product content. These tokens are
 * only for application chrome: controls, frames, inputs and status surfaces.
 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  --fj-ui-font: "Grandstander", "Crafty Girls", "Pangolin", "Arial Rounded MT Bold", "PingFang SC", sans-serif;

  --fj-ui-paper: #fffdf8;
  --fj-ui-cream: #f8f3e7;
  --fj-ui-ice: #f3f8fc;
  --fj-ui-selected: #d7f3b1;
  --fj-ui-selected-hover: #cceca3;
  --fj-ui-coral: #f6d4d6;
  --fj-ui-line: #b1d0ec;
  --fj-ui-line-focus: #76a6ce;
  --fj-ui-ink: #25533f;
  --fj-ui-muted: #547462;

  --fj-ui-stroke: 2px;
  --fj-ui-radius-pill: 999px;
  --fj-ui-radius-control: 18px;
  --fj-ui-radius-window: 28px;
  --fj-ui-gap-1: 4px;
  --fj-ui-gap-2: 8px;
  --fj-ui-gap-3: 12px;
  --fj-ui-gap-4: 16px;
  --fj-ui-gap-5: 24px;
  --fj-ui-gap-6: 32px;

  /* Creation player: preview CSS and exported Canvas use the same geometry. */
  --fj-player-reference-width: 300px;
  --fj-player-radius: 28px;
  --fj-player-border: 1.5px;
  --fj-player-pad-top: 16px;
  --fj-player-pad-inline: 18px;
  --fj-player-pad-bottom: 18px;
  --fj-player-bay-pad: 4px;
  --fj-player-bay-radius: 24px;
  --fj-player-media-radius: 14px;
  --fj-player-gap: 14px;
  --fj-player-transport-height: 48px;
  --fj-player-button-size: 40px;
  --fj-player-control-gap: 8px;
  --fj-player-restart-size: 26px;
  --fj-player-copy-gap: 7px;
  --fj-player-status-size: 9px;
  --fj-player-time-size: 10px;
  --fj-player-range-height: 16px;
  --fj-player-track-height: 5px;
  --fj-player-thumb-size: 16px;

  /* Desktop layout values mirrored by the existing Figma Web variables. */
  --fj-layout-topbar-height: 108px;
  --fj-layout-source-toolbar-width: 58px;
  --fj-layout-source-tool-row-height: 56px;
  --fj-layout-about-content-width: 1120px;
  --fj-layout-desktop-viewport-width: 1470px;

  --fj-ui-motion-fast: 160ms;
  --fj-ui-motion-medium: 240ms;
  --fj-ui-ease: cubic-bezier(.2, .78, .18, 1);

  --fj-shape-pill: url("./assets/ui/doodle-pill.svg");
  --fj-shape-pill-hover: url("./assets/ui/doodle-pill-ice.svg");
  --fj-shape-pill-selected: url("./assets/ui/doodle-pill-selected.svg");
  --fj-shape-pill-selected-hover: url("./assets/ui/doodle-pill-selected-hover.svg");
  --fj-shape-pill-focus: url("./assets/ui/doodle-pill-focus.svg");
  --fj-shape-pill-selected-focus: url("./assets/ui/doodle-pill-selected-focus.svg");
  --fj-shape-pill-coral: url("./assets/ui/doodle-pill-coral.svg");

  --fj-shape-segment: url("./assets/ui/doodle-segment.svg");
  --fj-shape-segment-selected: url("./assets/ui/doodle-segment-selected.svg");
  --fj-shape-segment-focus: url("./assets/ui/doodle-segment-focus.svg");
  --fj-shape-segment-selected-focus: url("./assets/ui/doodle-segment-selected-focus.svg");
  --fj-shape-segment-coral: url("./assets/ui/doodle-segment-coral.svg");

  --fj-shape-circle: url("./assets/ui/doodle-circle.svg");
  --fj-shape-circle-hover: url("./assets/ui/doodle-circle-ice.svg");
  --fj-shape-circle-selected: url("./assets/ui/doodle-circle-selected.svg");
  --fj-shape-circle-focus: url("./assets/ui/doodle-circle-focus.svg");
  --fj-shape-circle-selected-focus: url("./assets/ui/doodle-circle-selected-focus.svg");
  --fj-shape-circle-coral: url("./assets/ui/doodle-circle-coral.svg");
  --fj-shape-circle-coral-focus: url("./assets/ui/doodle-circle-coral-focus.svg");

  --fj-shape-island: url("./assets/ui/doodle-island.svg");
  --fj-shape-island-focus: url("./assets/ui/doodle-island-focus.svg");
  --fj-shape-island-fill: url("./assets/ui/doodle-island-fill.svg");
  --fj-shape-island-outline: url("./assets/ui/doodle-island-outline.svg");
  --fj-shape-card: url("./assets/ui/doodle-card.svg");
  --fj-shape-card-hover: url("./assets/ui/doodle-card-ice.svg");
  --fj-shape-card-selected: url("./assets/ui/doodle-card-selected.svg");
  --fj-shape-card-focus: url("./assets/ui/doodle-card-focus.svg");
  --fj-shape-card-outline: url("./assets/ui/doodle-card-outline.svg");
  --fj-shape-window: url("./assets/ui/doodle-window.svg");
  --fj-shape-window-focus: url("./assets/ui/doodle-window-focus.svg");
  --fj-shape-window-outline: url("./assets/ui/doodle-window-outline.svg");
  --fj-shape-sidebar: url("./assets/ui/doodle-sidebar.svg");
  --fj-shape-sidebar-medium: url("./assets/ui/doodle-sidebar-medium.svg");
  --fj-shape-sidebar-compact: url("./assets/ui/doodle-sidebar-compact.svg");
  --fj-shape-device: url("./assets/ui/doodle-device.svg");
  --fj-shape-wide-window: url("./assets/ui/doodle-wide-window.svg");
  --fj-shape-wide-window-soft: url("./assets/ui/doodle-wide-window-soft.svg");
  --fj-shape-wide-window-selected: url("./assets/ui/doodle-wide-window-selected.svg");
  --fj-shape-wide-window-focus: url("./assets/ui/doodle-wide-window-focus.svg");
  --fj-shape-medium-window: url("./assets/ui/doodle-medium-window.svg");
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fj-ui-motion-fast: 0ms;
    --fj-ui-motion-medium: 0ms;
  }
}